vuex的使用

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)
}