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 = valCookie.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辅助函数来简化这些操作。