vue - store 状态管理

整理vuex 的基本使用。

目录结构如下：

index.js 代码如下：

 

import Vue from 'vue';

import Vuex from 'vuex';

import app from './modules/app';

import getters from './getters';

Vue.use(Vuex);

const store = new Vuex.Store({

    modules: {

        app

    },

    getters

});

export default store;

 

getters.js 代码如下：

const getters = {

    menus: (state) => state.app.menus

};

export default getters;

 

app.js 代码如下：

const app = {

    state: {

        menus: [],

        reload: false

    },

    mutations: {

        SET_MENUS(state, payload) {

            state.menus = payload;

        }

    },

    actions: {

        addMenus({ commit, state }, data) {

            let menusArr = state.menus;

            for(let i in menusArr){

                if(menusArr[i].id==data.id){

                    return;

                }

            }

            menusArr.push(data);

            commit('SET_MENUS', menusArr);

        },

        setMenus({ commit, state }, data) {

            commit('SET_MENUS', data);

        }

    }

};

export default app;

 

下面是在组件中的使用：

import { mapGetters, mapActions } from "vuex";

computed: {

...mapGetters(["menus"])

},

methods: {

...mapActions(["addMenus"]),

}

整理完毕，。如果还是不理解，请查看vuex官方文档后，再看此篇博客，仅供参考。