Vuex在uniapp项目中应用案例

项目引入Vuex

首先在项目中引入如下目录结构

其中,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 = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

const store = new Vuex.Store({
    modules
})

export default store

项目的main.js中全局引入Vuex

import 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 = false

Vue.use(plugin)
Vue.use(tool)

App.mpType = 'app'

const app = new Vue({
    store,
    ...App
})
app.$mount()

初始化Store相关结构

建立buildArchives.js文件，定义store数据结构，方便待会操作store

export 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  = []
			state.checkedIndex = []
			state.checkedSaveData     = []
			state.checkedData  = []
			state.deleteData   = []
		},
		SET_CHECKED_INDEX:(state,data) => {
			state.checkedIndex = data
		},
        SET_OPTIONS_DATA:(state,data) => {
			state.optionsData = 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 = []
			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);
    },