VUEX的结构目录使用

1、结构

这个结构，其实就是再告诉你，导入store以后，就可以使用通过modules分组的方式使用。

2 、关键点解析

如何引入store

在需要使用的js文件当中，包括：main.js，或者是。router当中的index.js文件中最常出现。

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'

router // index.js

import store from "../store"

引入一个还是一堆？

这个部分，需要解释一下。当直接导入 ../store 时，实际上是导入了整个模块。但是具体是按照如下要求写：

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import menus from "./modules/menus";

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        token: ''

    },
    mutations: {

        SET_TOKEN: (state, token) => {
            state.token = token
            localStorage.setItem("token", token)
        },


    },
    actions: {},
    modules: {
        menus // 这个部分，其实就相当于，this.$store.menus 给引入了下一级的变量
    }
})

menus.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default {
    state: {

        menuList: [],
        permList: [],

        hasRoutes: false,

        editableTabsValue: 'Index',
        editableTabs: [{
            title: '首页',
            name: 'Index',
        }]
    },
    mutations: {
        setMenuList(state, menus) {
            state.menuList = menus
        },
        setPermList(state, perms) {
            state.permList = perms
        },
        changeRouteStatus(state, hasRoutes) {
            state.hasRoutes = hasRoutes
        },

        addTab(state, tab) {

            let index = state.editableTabs.findIndex(e => e.name === tab.name)

            if (index === -1) {
                state.editableTabs.push({
                    title: tab.title,
                    name: tab.name,
                });
            }

            state.editableTabsValue = tab.name;
        },

        resetState: (state) => {
            state.menuList = []
            state.permList = []

            state.hasRoutes = false
            state.editableTabsValue = 'Index'
            state.editableTabs = [{
                title: '首页',
                name: 'Index',
            }]
        }

    },
    actions: {
    },

}

所以，当需要访问 menus模块下的，state当中的hasRoute变量时，具体的访问方法如下：

this.$store.state.menus.hasRoute

方法的调用

对于store当中的mutations，具体的调用，就没有继承关系了。

 this.$store.commit("addTab", item) // 虽然，addTab是menus当中的mutation，但是仍然是store直接commit this.$store.commit('SET_TOKEN', jwt) // 虽然，SET_TOKEN，在父类，但是仍然使用store直接调用