携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情
Vuex 是 Vue 为我们提供的状态管理工具，在前面有写过关于vuex更新视图引发的思考，本文主要针对 Vue3 中使用 Vuex 来进行展开。
实现方式
一般我们会将文件存放在 store 文件夹下，创建义并导出 store 对象,具体结构如下。
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
然后在 main.js 中引入：
import store from '@/store'
app.use(store)
在页面中使用：
引入useStore，用 useStore() 返回一个 store 实例
import { useStore } from 'vuex'
const store = useStore()
console.log(store)
数据变化
在对状态管理中的数据进行修改时，不要 使用 state 直接进行数据变化的操作，Vuex 为我们提供了方式：
- mutation
- action
mutation 中进行同步操作，action 中进行异步操作。
其中，mutation 中无法跟踪到异步操作的数据变化。actions 中需要 context 上下文对象，再通过 context 去触发 mutions 中的方法
mutations: {
setName (state, name) {
state.name = name
}
},
actions: {
myActions (context, name) {
setTimeout(() => {
context.commit('setName', name)
}, 1000)
}
}
mutation 定义后的调用 : commit（）包含要提交的方法名称以及传递的参数
store.commit('updateData'， value)
action 定义后调用：使用 dispatch() 进行分发
store.dispatch('myActions', "俺的名字")
注：
- Vue3 中不需要再使用
vue.set()来进行响应式数据的更新 - 使用 mapState、 mapGetters 需要进行封装
- 在定义的时候，也可以写成装饰器的写法：
可能遇到的问题
场景1：
不要在mutation函数外修改VUEX存储状态，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
state中的值必须在Vuex的回调函中更改，而在页面修改数组或者对象的值时，触发了 vuex 中 state 的值变化，由此报出了错误。
数组或者对象赋值后，不受数据改变的影响的正确做法：
let arr = Object.assign({},this.arr)
let arr = JSON.parse(JSON.stringify(this.arr))
let arr = this.arr.slice()
场景2：
[vuex] unknown mutation type
