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