vuex模块化的使用

将vuex划分为模块化使用，便于管理优化

1. vuex的使用

        vuex分为 state、mutation、action、getter

        新建index.js作为vuex的主文件

        

import Vue from 'vue';
import Vuex from 'vuex';
import batchEdit from './batchEdit.js';

Vue.use(Vuex);

export default new Vuex.Store({
    // 将vuex划分为模块化，modules里可以取别的名称
    modules: {
        batchEdit,
    },

});

2. 新建模块化文件batchEdit.js

 export default {

    // 开启命名空间
    namespaced: true,

     // 存放数据
    state: {
        count: ''
    },

    // 同步修改数据使用
    mutations: {
        initState(state, value) {
            Object.assign(state, value);
        },
    },

    // 异步修改数据使用
    actions: {},

    // 简化数据使用,计算属性
    getters:{},

    // 模块化
    modules: {},

};

开启命名空间 namespaced:true 

组件内使用

computed: {
        ...mapState('batchEdit', ['count',]),
    },

    // 提交vuex
    this.$store.commit('batchEdit/initState', {
        count: '',
    });