1.理解
专门在vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
2.什么时候使用
多个组件需要共享数据时
3.安装
npm install vuex
4.在src目录下创建一个store文件夹,建个index.js文件
5.在index.js文件配置
import {createStore} from 'vuex'
export default createStore({
state:{//存储共享数据
visible:'',
themeConfig:{
isCollapseMenu:false,
isOpenThemeDrawer:false,
}
},
//修改state中的数据
mutations:{
setVisible(state,value){
state.visible = value
},
collapseMenu(state,value){
state.themeConfig.isCollapseMenu = value
},
themeDrawer(state,value){
state.themeConfig.isOpenThemeDrawer = value
}
},
//在这里可以进行其他的业务逻辑处理,处理完成再调用mutations中的函数修改state中的数据
actions:{
setVisible(context){//context与store实例有相同的方法和属性
context.commit('setVisible')
}
},
//获取state中的最新数据,可监听state中的数据
getters:{
getCollapseMenu(state){
return state.themeConfig.isCollapseMenu
}
},
module:{}
})
6.在main.js引用
vue3配置方式
vue2配置方式
7、使用
import store from '@/store'
const collapseMenu = () => {
ElMessage.success("操作成功")
store.commit('collapseMenu',!state.isCollapseMenu)
}