vue3中vuex状态管理的使用

1.安装

npm install vuex -S

2.挂载vuex

在main.js文件中进行挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

3.使用状态管理

在store文件夹下新建index.js文件

import {
	createStore
} from 'vuex'

export default createStore({
	state: {
		count: 1
	},
	getters: {
	},
	mutations: {
		del(state,v){
			state.count-=v
		},
		add(state,v){
			state.count+=v
		}
	},
	actions: {
		del(context,v){
			context.commit('del',v)
		},
		add(context,v){
			context.commit('add',v)
		}
	},
	modules: {}
})

在需要使用状态管理的组件中引入使用

<template>
	<h3>我是vuex状态管理</h3>
	<button @click="del">-</button>
	{{count}}
	<button @click="add">+</button>
</template>

<script setup>
	// vuex状态管理操作步骤
	// 先引入useStore函数,调用该函数，用变量接收返回对象
	// 用计算属性处理数据才具有响应式
	import {useStore} from 'vuex'
	import {computed} from 'vue'
	let store = useStore()//调用函数，用变量接收返回对象
	let count = computed(()=>store.state.count)
	function del(){
		store.dispatch('del',3)
	}
	function add(){
		store.dispatch('add',2)
	}
</script>