Vuex 是一个专门为Vue.js应用程序开发的状态管理模式。它集中管理应用程序中的所有组件的状态，并提供了一种可预测的方式来修改和查询状态。
Vuex的核心概念包括：
- State（状态）：应用程序的状态存储在一个单一的对象中，称为state。在Vue组件中，可以通过this.$store.state来访问状态。
- Getters（计算属性）：用于从状态中派生出一些衍生数据，类似于Vue组件中的计算属性。可以通过this.$store.getters来访问计算属性。
- Mutations（变更）：用于修改状态的唯一方式。Mutations是同步的操作，通过提交一个mutation来修改状态，并且每个mutation都有一个对应的字符串类型的事件名和一个处理函数。
- Actions（动作）：用于处理异步的操作，例如从服务器获取数据。Action提交一个mutation来间接修改状态。Actions可以包含任何异步操作，并且可以通过this.$store.dispatch来触发。
- 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. s t o r e . s t a t e 访问状态，如 t h i s . store.state访问状态，如this. store.state访问状态，如this.store.state.tab.isCollapse
this.$store.commit('setMenu',data.data.data)调用方法
但更推荐的做法是使用mapState、mapGetters、mapMutations和mapActions辅助函数来简化这些操作。
原文链接: https://blog.csdn.net/qq_53568730/article/details/138231945