Vuex的使用以及持久化的实现（2.0版本）

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;

/**
 * 数据源
 */
const state = {
    aFlag: false,
    msg: ‘oukele‘,
}

/**
 * 在mutations中写上自定义的方法，
 * 然后在组件的js中通过 this.$store.commit("自定义的方法名")
 * 可以更新 store(即上方定义的 state对象 的属性值) 中的数据和状态
 *
 * 注意：mutations 必须是同步函数 ( 因为在 mutations 中导致任何数据源状态变更都应该在此刻完成 )
 * 官方解释：在 mutation 中混合异步调用会导致你的程序很难调试。
 *         例如，当你调用了两个包含异步回调的 mutation 来改变状态，
 *         你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。
 *         在 Vuex 中，mutation 都是同步事务
 *
 * 为了处理异步操作，请使用 Action
 */
const mutations = {

    /**
     * 更改 state 中 aFlag 的值 方法
     * @param state 数据源对象
     */
    changeAFlag(state){
        state.aFlag = true;
    },

    /**
     * 更改 state 中 msg 的值 方法( 可以传递自定义参数 ) + 本地持久化
     * @param state 数据源对象
     * @param params 传递的自定义参数
     * @param isEndurance 是否本地持久化
     */
    changeMsg(state , params , isEndurance){
        // DOTO
        // 等会再完善
        console.log( state , params + " - " + isEndurance )
    }
}

/**
 * store 中定义“getter”（可以认为是 store 的计算属性）
 * Getter 会暴露为 store.getters 对象，你可以以属性的形式访问 state(数据源中的) 这些值
 */
const getters = {

    /**
     * 在外部中 可通过 this.$store.getters.getAFlag 取出 aFlag 的值
     * 注意：因为我这里使用了 模块化，所以使用时应该是这样的调用：
     *                      模块名 + 调用的函数
     * this.$store.getters[‘storeDemo1/getAFlag‘]
     *
     * @param state
     */
    getAFlag(state){
        return state.aFlag;
    },
    msg( state ){
        return state.msg;
    }
}

export default { state , mutations , getters }