vuex分模块管理状态demo

新建文件

1.store 文件夹下新增index.js和modules目录
2.index文件代码

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        app
    }
});

export default store;

3.app.js模块的代码

/**
 *  1.mutations 里只作增伤改最简单的操作。
 *  2.actions是对mutations 的再封装，比如异步登录操作等。
 *  3.在组件里可以调用都可以调用actions和mutations方法。
 *  4.mutations中定义的方法是通过store.commit('laoding',true)。
 *  5.actons定义的方法是通过store.dispath('laoding',true)。
 */
const app = {
    state: {
        loading: false
    },
    getters: {
        loading: state => state.app.loading
    },
    mutations: {
        SET_LOADING: (state, loading) => {
            state.loading = loading;
        }
    },
    actions: {
        setLoading({ commit }, loading) {
            setTimeout(() => {
                commit("SET_LOADING", loading);
            }, 200);
        }
    }
};
export default app;