总体结构： store --> module --> visitposition、mine、等小模块
创建 shop.js
import {api} from '../api';
import ajax from '../ajax';
const state = {
companyList: [],//产品中心列表
},
const getters = {};
getMktInspectionSubject({commit, dispathc, state}, param) {
return ajax.post(api.getMktInspectionSubject, param)
},
const mutations = {
'SET_INSPECT_LIST': (state, list) => {
state.inspectionSubjectList = list;
},
}
export default {
state,
getters,
actions,
mutations
}
中间
这里的结构是：
1、创建一个 module文件夹（里面就是 下图【是moule下的某个子模块】，和官网一样），
2、在它们最外成创建一个Vuex的文件index.js ,把其它模块引入即可。
index.js文件 ,核心代码 ： export default new Vuex.Store
import Vue from 'vue';
import Vuex from 'vuex';
import demo from './modules/demo'; //TODO 该行代码用于示例，与项目无关，请自行删除
import workReport from './modules/workReport';
import com from './modules/com';
import shop from './modules/shop';
Vue.use(Vuex);
// 这里将store分割成模块以使它不显得过分臃肿，但有一点需要注意的是，除了 state，模块内部的
// action、mutation 和 getter 现在仍然注册在全局命名空间————这样保证了多个模块能够响应
// 同一 mutation 或 action。你可以通过添加前缀或后缀的方式隔离各模块，以避免名称冲突。
export default new Vuex.Store({
modules: {
demo, //TODO 该行代码用于示例，与项目无关，请自行删除
workReport,
com,
shop,
homePage,
visitCustomers,
}
});
vuex.png
在 main.js 引入，全局即可
import store from './store'
...
...
...
function setupVue() {
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
}
使用：（获取、赋值）
// 1、引入
import {mapState, mapMutations} from 'vuex';
...mapState({
// 因为我创建的文件名是 shop,所以使用 state.shop.xxxxxx , subjectListArr是自定义的
subjectListArr: state => state.shop.inspectionSubjectList,
}
使用：this.subjectListArr
赋值（更新值）
self.$store.commit('SET_INSPECT_LIST', '要更新的值');
