Vuex使用之Vue3

1. 搭建Vuex环境
创建文件：src/store/index.js

 //引入Vueximport { createStore } from 'vuex'//准备actions对象——响应组件中用户的动作const actions = {jia(context, value) {context.commit('JIA', value)}}//准备mutations对象——修改state中的数据const mutations = {JIA(context, value) {context.sum += value}}//准备state对象——保存具体的数据const state = {sum: 0}//当state中的数据需要经过加工后再使用时，可以使用getters加工,相当于计算属性const getters = {}//创建并暴露storeexport default createStore({actions,mutations,state,getters})

修改main.js文件

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'createApp(App).use(store).mount('#app')

调用方法

<!--用于显示state中的变量-->
<h1>{{$store.state.变量名称}}</h1>
<!--用于显示经过处理后的state中的变量-->
<h1>{{$store.getters.方法名称}}</h1>

import { useStore } from "vuex"
let store=useStore()
//用于显示state中的变量
store.state.变量名称
//用于显示经过处理后的state中的变量
store.getters.方法名称

import { useStore } from "vuex"
let store=useStore()
//调用actions中方法
store.dispatch('action中的方法名',数据)
//调用mutations中方法
store.commit('mutations中的方法名',数据)