逐步封装VUEX

官网：https://vuex.vuejs.org/zh/

前言（摘自官方说明）：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

准备工作：

1、安装VUEX，npm install vuex --save
2、导入VUEX，main.js里添加 import store from ‘./store’
3、在src下创建store文件，添加index.js，添加modules文件夹（结构可参考官方）
4、谷歌浏览器Google Chrome安装官方调试工具（安装以后F12即可看到Vue选项，如图：）

1.0版本

const store = new Vuex.Store({
    //状态管理，获取状态：$store.state.状态名称
    state:{
        indexcategory:[],//首页菜单
    },
    //修改状态，修改state：$store.commit('mutations名称',数据)
    mutations:{
        indexcategory (state,arr) {
            // 变更状态
            state.indexcategory=arr;
        },
    },
    //action类似于mutation，action提交给mutation，不可以更改状态，action可以异步操作。修改mutations：$store.dispatch('actions名称')
    actions:{
        //首页类别
        indexcategory() {
            axios.post("/indexcategory").then(response => {
                if (response.data) {
                    console.log(response.data.data.list);
                    store.commit('indexcategory',response.data.data.list)
                }
            })
        }
    },
    //属性计算
    getters:{
    }
});

2.0版本

//获取getters：$store.getters['模块名称/方法']，
//提交actions：$store.dispatch('模块名称/方法')，
//提交mutations：$store.commit('模块名称/方法')
const moduleA = {
    namespaced: true,
    state: () => ({
        //状态管理
        indexcategory:[],
    }),
    mutations: {
        //变更状态
        indexcategory (state,arr) {
            state.indexcategory=arr
        }
    },
    actions: {
        //异步请求获取数据后传给mutations修改状态
        indexcategory() {
            axios.post("/indexcategory").then(response => {
                if (response.data) {
                    console.log(response.data.data.list);
                    store.commit('moduleA/indexcategory',response.data.data.list)
                }
            })
        }
    },
    getters: {
        //计算属性
    }
}
const store = new Vuex.Store({
    modules: {
        moduleA,
      }
});
export default store;

3.0版本

1、在modules目录内创建moduleA.js

const state = {
    indexgoods:[],
}

const mutations = {
    indexgoods (state,arr) {
        state.indexgoods=arr//变更状态
    }
}

const actions = {
    //异步请求获取数据后传给mutations修改状态
    indexgoods({commit},arr) {
        axios.post("/goods").then(response => {
            if (response.data) {
                console.log(response.data.data.list);
                commit('indexgoods',response.data.data.list)//传给mutations修改indexgoods
            }
        })
    }
}

const getters = {
    //计算属性
    menus (state) {
        let newlist=[];//由于接口的键名称和组件属性不一样需要更换一致的
        state.menu.map(
            item=>{
                let obj={};
                obj.id=item.id;
                obj.text=item.name;
                newlist.push(obj);
            }
        )
        return newlist;
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

2、导入模块到index.js内即可

import moduleA from './modules/moduleA'
const store = new Vuex.Store({
    modules: {
        moduleA
    }
});
export default store;

3、组件获取状态和触发事件

$store.state.moduleB.indexcategory//获取状态
this.$store.dispatch('moduleB/indexcategory')//触发action再传到mutation修改状态
$store.getters['menu/menus']//获取计算属性返回结果

4.0版本

此代码摘自element-UI ,通过webpack的方法将目录内的模块导入，无需按3.0的方法去手动导入了。

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
})

5.0版本

官方还有一种方案，官方文档：https://vuex.vuejs.org/zh/guide/modules.html

└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块