项目引入Vuex 首先在项目中引入如下目录结构
【#|Vuex在uniapp项目中应用案例】
文章图片
其中,index.js 文件内容如下:
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = https://www.it610.com/article/modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})const store = new Vuex.Store({
modules
})export default store
项目的
main.js中全局引入Vueximport Vue from 'vue'
import App from './App'
import store from './store'
import plugin from './js_sdk/uni-admin/plugin'
import cuCustom from './colorui/components/cu-custom.vue'//colorUI
import Request from './js_sdk/request/luch-request/index'
import tool from './js_sdk/common/tool'Vue.prototype.$http = new Request()Vue.component('cu-custom',cuCustom);
Vue.config.productionTip = falseVue.use(plugin)
Vue.use(tool)App.mpType = 'app'const app = new Vue({
store,
...App
})
app.$mount()
初始化Store相关结构 建立
buildArchives.js文件，定义store数据结构，方便待会操作storeexport default {
namespaced: true,
//定义数据结构
state: {
optionsData : [],//初始数据
checkedIndex: [],//选中的下标
checkedData : [],//选中的
checkedSaveData: [],//确认选中的
deleteData: [],//删除的数据（用于在选择列表做取消选择处理）
farmerId:""
},
//提供获取数据接口
getters: {
getOptionsData : (state) => state.optionsData,
getCheckedIndex: (state) => state.checkedIndex,
getCheckedSaveData: (state) => state.checkedSaveData,
getCheckedData : (state) => state.checkedData,
getFarmerId : (state) => state.farmerId,
},
//操作数据
mutations: {
INIT_DATA: (state) => {
state.optionsData= https://www.it610.com/article/[]
state.checkedIndex = []
state.checkedSaveData= []
state.checkedData= []
state.deleteData= []
},
SET_CHECKED_INDEX:(state,data) => {
state.checkedIndex = data
},
SET_OPTIONS_DATA:(state,data) => {
state.optionsData = https://www.it610.com/article/data
},
SET_FARMER_ID:(state,data) => {
state.farmerId = data
},
SELECT_OPTIONS_DATA:(state,index) => {
// 选中 or 取消
state.optionsData[index].checked = !state.optionsData[index].checked
// 保存选中的下标
if(state.optionsData[index].checked){
state.checkedIndex.push(index)
}else{
state.checkedIndex.splice(index,1)
}
// 已选择的
if(state.checkedIndex.length){
state.checkedData.length = 0
state.checkedIndex.forEach(index => {
state.checkedData.push(state.optionsData[index])
})
}else {
state.checkedData.length = 0
}
},
// 保存选中的数据
SAVE_OPTIONS_DATA:(state) => {
state.checkedSaveData = https://www.it610.com/article/[]
if(state.checkedIndex.length){
state.checkedIndex.forEach(index => {
state.checkedSaveData.push(state.optionsData[index])
})
}
},
// 移除已选择的数据
DELETE_CHECKED_DATA:(state,index)=>{
state.optionsData.forEach((item,i) => {
if(state.checkedData[index].label === item.label){
state.optionsData[i].checked = false
// state.checkedIndex.splice(index,1)
}
})
state.checkedIndex.forEach(i => {
if(state.checkedData[index].index===i){
state.checkedIndex.splice(i,1)
}
})
state.checkedData.splice(index,1)
}
},
//调用操作数据模块
actions: {
setOptionsData({commit},data){
commit('SET_OPTIONS_DATA',data)
},
setFarmerId({commit},data){
commit('SET_FARMER_ID',data)
}
}
}修改store中数据
this.$store.commit('buildArchives/SET_FARMER_ID', farmerId);
buildArchives/SET_FARMER_ID中buildArchives代表文件名称获取store中数据
//1.导入
import { mapGetters } from 'vuex'//2.监听数据
computed: {
...mapGetters('buildArchives',['getFarmerId']),
//上传地址
serverUrl() {
return config.uploadUrl+"?token="+this.$store.state.user.token;
},},//3.使用
onLoad(option){
let {id} = option ;
if (id) {
this.formData.archivesRegisterId = id;
this.earLabelBoo = true;
}
//使用
this.formData.farmerId = this.getFarmerId;
console.log(this.formData.farmerId);
},
推荐阅读
- 前端|8.Django怎样去调用漂亮的HTML前端页面（）
- 前端|vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
- 前端|实习生 Git 不熟练，还没脸去问是种什么体验
- #|强化学习笔记（3）—— 有限马尔可夫决策过程（finite MDP）
- VUE|Vue学习笔记
- VUE|安装与配置axios
- 小小的项目|【HTML——简易 飞机大战 小游戏（效果+代码）】
- html|【HTML——3d粒子特效（效果+代码）】
- html|【HTML——彩虹马 特效（效果+代码）】