3-Vuex状态管理

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它集中管理应用程序中的所有组件的状态，并提供了一种可预测的方式来修改和查询状态。
Vuex的核心概念包括：

1. State（状态）：应用程序的状态存储在一个单一的对象中，称为state。在Vue组件中，可以通过this.$store.state来访问状态。
2. Getters（计算属性）：用于从状态中派生出一些衍生数据，类似于Vue组件中的计算属性。可以通过this.$store.getters来访问计算属性。
3. Mutations（变更）：用于修改状态的唯一方式。Mutations是同步的操作，通过提交一个mutation来修改状态，并且每个mutation都有一个对应的字符串类型的事件名和一个处理函数。
4. Actions（动作）：用于处理异步的操作，例如从服务器获取数据。Action提交一个mutation来间接修改状态。Actions可以包含任何异步操作，并且可以通过this.$store.dispatch来触发。
5. Modules（模块）：当应用程序变得复杂时，可以将state、getters、mutations和actions分割成模块。每个模块拥有自己的state、getters、mutations和actions。
   通过使用Vuex，我们可以更好地组织和管理应用程序的状态，实现组件之间的数据共享和通信，并且使状态变更的过程更加可追踪和可维护。

Vuex一般用来存储全局可访问的数据

步骤：
1.安装

npm install vuex@版本号

2.在一个文件夹下创建两个.js文件如 tab.js和index.js

//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
Vue.use(Vuex)

//创建vuex的实例


export default new Vuex.Store({
    modules: {
        tab
    }
})


//tab.js
import Cookie from 'js-cookie'
export default {
    state: {
        isCollapse: false, //控制菜单展开或收起变量
        tabsList: [ //面包屑数据
            {
                path: '/',
                name: 'home',
                label: '首页',
                icon: 's-home',
                url: 'Home/Home'
            },
        ],
        //侧边框菜单数据
        menu: [],
    },
    mutations: {
        collapseMenu(state) { //控制菜单展开或收起方法
            state.isCollapse = !state.isCollapse
        },
        //更新面包屑数据
        selectMenu(state, val) {
            // console.log(val)
            //判断添加数据是否为首页
            if (val.name !== 'home') {
                const index = state.tabsList.findIndex(item => item.name === val.name)
                    //不存在
                if (index == -1) {
                    state.tabsList.push(val)
                }
            }
        },
        //删除指定的tag数据
        closeTag(state, item) {
            // console.log(item)
            const index = state.tabsList.findIndex(val => val.name === item.name)
            state.tabsList.splice(index, 1)
        },
        setMenu(state, val) {
            state.menu = val
            Cookie.set("menu", JSON.stringify(val))
        },
        //动态注册路由
        registerouter(state, router) {
            // 没有数据
            if (!Cookie.get("menu")) return
                //有数据
        }
    }
}

3.在main.js（或相应的入口文件）中，需要引入刚刚创建的store，并在创建Vue实例时传入

4.访问数据或方法
在你的Vue组件中，可以通过this.$store.state访问状态，如this.$store.state.tab.isCollapse
this.$store.commit(‘setMenu’,data.data.data)调用方法
但更推荐的做法是使用mapState、mapGetters、mapMutations和mapActions辅助函数来简化这些操作。