什么是 vuex ？这里不进行过多介绍，请直接看官网

Vuex 是什么？ | Vuex (vuejs.org)

Vuex 主要有四部分：

　　1. state： 包含了 store 中存储的各个状态。

　　2. getter：类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。

　　3. mutation：一组方法，是改变store中状态的执行者，只能是同步操作。

　　4. action：一组方法，其中可以包含异步操作。

 

源码代码在 文章的最下方（注意： 首次运行本项目时,请先输入命令： npm install  ，进行安装对应的模块依赖）

 

1、假设你的项目已经建好，并且也已经安装了 Vuex ....

 

2、在 src 目录中 新增一个名为 store 的文件夹，我的项目结构如下：

 

3、在 store 文件夹中 新增  index.js 文件

内容如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 批量自动导入 自定义不同的vuex模块
let modules = {}

// 在 modules当前目录中 找出所有以 .js 结尾的文件
const files = require.context('./modules', false, /\.js$/);
files.keys().forEach(key => {
    modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default;
})
Object.keys(modules).forEach((key) => {
    // 使其成为带命名空间的模块。
    // 保证在变量名一样的时候，添加一个父级名拼接
    modules[key]["namespaced"] = true;
});
// 以下的结果为：
/**
 *
 *   {
 *       "storeDemo1": { 第一个模块
 *          "namespaced": true,
 *          "state": {
 *              "aFlag": false
 *           },
 *       },
 *       "storeDemoN.." : { 第 n 个 模块
 *           "namespaced": true,
 *           "state": {
 *              "N..Flag": false
 *           },
 *       }
 *   }
 */

const store = new Vuex.Store({
    modules
})
export default store;

View Code