模块化

当项目比较庞大, vuex 里面的操作过多,写在一个文件的操作,可读性会越来越差,这个时候为了解耦我们采用模块化的方法,具体步骤如下

1.模块化之基本使用

• 模块化目录 ``` |—Sotre |—module

                 |--user.js
                 |----user.js
                 |----setting.js

|——index.js

<a name="nTkxO"></a>
## 2.模块化之跨模块调用
<a name="SJ3xh"></a>
## 3. 模块化之批量引入
```javascript
/*
 * @Author: wangchaoxu
 * @Date: 2020-03-29 12:53:34
 * @LastEditors: wangchaoxu
 * @LastEditTime: 2020-10-09 11:41:10
 * @Description:
 */
import Vue from 'vue';
import Vuex from 'vuex';
import createVuexAlong from 'vuex-along';// 持久化储存插件
const files = require.context('./modules', false, /\.js$/);
const modules = {};
files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
});
Object.keys(modules).forEach(key => {
  modules[key]['namespaced'] = true;
});
const store = new Vuex.Store({
  state: {
    config: { },
    account: {},
    stations: [],
  },
  modules,
  plugins: [
    /* 经过测试发现如果vuex中的数据发生改变后,localStorage中相对应的数据也会跟着发生改变 */
    createVuexAlong({
      name: 'weidun',
      local: { list: ['account', 'stations'] },
    }),
  ],
});
export default store;