1. 在src文件夹下新建store文件夹,并创建index.js文件
index.js代码(动态加载modlues):
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 动态加载modlues
const allDynamicModules = {};
const files = require.context('./', true, /\.js$/);
const dynamicImportModules = (modules, file, splits, index = 0) => {
if (index === 0 && splits[0] === 'modules') {
++index;
}
if (splits.length == index + 1) {
if ('index' == splits[index]) {
modules[splits[index - 1]] = files(file).default;
} else {
modules.modules[splits[index]] = files(file).default;
}
} else {
let tmpModules = {};
if ('index' == splits[index + 1]) {
tmpModules = modules;
} else {
modules[splits[index]] = modules[splits[index]] ? modules[splits[index]] : { namespaced: true, modules: {} };
tmpModules = modules[splits[index]];
}
dynamicImportModules(tmpModules, file, splits, ++index);
}
};
files
.keys()
.filter(file => file != './index.js')
.forEach(file => {
let splits = file.replace(/(\.\/|\.js)/g, '').split('/');
dynamicImportModules(allDynamicModules, file, splits);
});
const store = new Vuex.Store({
state: {},
modules: allDynamicModules,
mutations: {
$uStore(state, payload) {
// 判断是否多层级调用,state中为对象存在的情况,诸如user.info.score = 1
let nameArr = payload.name.split('.');
let saveKey = '';
let len = nameArr.length;
if (nameArr.length >= 2) {
let obj = state[nameArr[0]];
for (let i = 1; i < len - 1; i++) {
obj = obj[nameArr[i]];
}
obj[nameArr[len - 1]] = payload.value;
saveKey = nameArr[0];
} else {
// 单层级变量,在state就是一个普通变量的情况
state[payload.name] = payload.value;
saveKey = payload.name;
}
}
},
actions: {}
});
export default store;
2. 在main.js中引入store文件夹并挂载
main.js代码:
import store from './store';
new Vue({
router,
vant,
store,
render: h => h(App)
}).$mount('#app')
3. 在store文件夹下新建modules文件夹,在modules文件夹下新建模块文件夹,在模块文件夹下新建js文件
举例:
ncovaBroad.js代码:
'user strict';
const state = {
ncovaInfo: {} //国外新冠信息
};
const mutations = {
setNcovaInfo(state, ncovaInfo) {
state.ncovaInfo = {
...state.ncovaInfo,
...ncovaInfo
};
}
};
const actions = {
getNcovaInfo(context, obj) {
context.commit('setNcovaInfo', obj)
},
};
export default {
namespaced: true,
state,
mutations,
actions
};
4. 页面中使用
1)dispatch:
this.$store.dispatch("ncovaBroad/ncovaBroad/getNcovaInfo", {
name: "ncova", //名称
attribute: "dangerous" //属性
});
2)state:
this.$store.state.ncovaBroad.ncovaBroad.ncovaInfo