vuex的store

总体结构： 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', '要更新的值');