基于Vue2.x风格的Vuex的使用方式不适合Vue3了
我们都知道Vuex是专门为Vue开发的一套状态管理方式，换个角度来看呢，就是给Vue2.x的不足之处打补丁的方式。
像 getter、action都是为了实现代码复用而采取的方式，就连module也是因为不方便单独编写管理模块而设计的。
而在Vue3的环境下，以及没有这些不足了，那么我们对于Vuex的使用方式，也不用拘泥于以前的风格。
我们大胆创新一下。
适合Vue3的特点的使用方式
首先可以去掉 getter和action了，完全没有用处。不说原理了，我们来看个实例。
假设我们要做一个弹窗的模态窗口实现添加和修改的功能，表单在一个单独的组件里面，其他组件有按钮，可以设置“发文”和“编辑”的指令。
需求比较常见吧，我们来设计一下。
state
export default createStore({
state: {
// 表单弹窗的状态
formState: {
editState: 'add', // 编辑状态，add：添加；update：修改；show ：只读显示
id: 0, // 0：添加；其他：要修改或者显示的数据的ID
isOpen: false, // 是否打开弹窗（模态）
model: {} // 这里只是演示异步加载，实际项目中并不适合这么做
}
},
mutations: {
// 改变表单弹窗的状态
setFormState(state, form) {
// 可以设置单独的属性，这里偷懒了。
Object.assign(state.formState, form)
}
},
modules: {
}
})
- formState
在state里面定义一个对象，对象的属性是我们需要的各种状态，这里为了演示异步加载，设置了model属性，其实并不需要这么设置。所以大家不要纠结这个设置不符合业务逻辑了。
这个对象会自动转换成reactive形式，所以会自带响应性，也就是说我们不需要在外面套个computed了。
同理getter的设计也是没用必要。
- setFormState
遵照只能在 mutations 修改状态的设定，我们定义了这个方法，以便实现修改状态的功能。
好了，vuex内部的设计就是这样，下面我们开始设计可以复用的管理类。
可以复用的状态管理类
我们建立一个map-form.js文件，里面写共用代码。
const mapForm = () => {
// 返回可读可写的表单弹窗状态
const formState = () => {
return store.state.formState
}
// 返回只读的表单弹窗状态
const getFormState = () => {
return readonly(store.state.formState)
}
// 打开弹窗
const openForm = () =>{
store.commit('setFormState', { isOpen: true})
}
// 关闭弹窗
const closeForm = () =>{
store.commit('setFormState', { isOpen: false})
}
// 设置添加数据
const addData = () =>{
store.commit('setFormState', {
isOpen: true,
id: 0,
editState: 'add'
})
}
// 设置修改状态
const updateData = (id) =>{
store.commit('setFormState', {
isOpen: true,
id: id,
editState: 'update'
})
}
// 设置只读状态
const showData = (id) =>{
store.commit('setFormState', {
isOpen: true,
id: id,
editState: 'show'
})
}
// 异步获取数据
const loadData = (id) =>{
return new Promise((resolve, reject) => {
setTimeout(() => {
store.commit('setFormState', {
model: {
title: '假装异步获取了数据'
}
})
resolve('成功了！')
}, 1000);
})
}
return {
formState, // 可读写状态
getFormState, // 只读状态
openForm, // 打开弹窗
closeForm, // 关闭弹窗
addData, // 添加新纪录并且打开弹窗
updateData, // 修改记录并且打开弹窗
showData, // 显示数据并且打开弹窗
loadData // 异步加载数据
}
}
export default mapForm
去掉“魔数”
这样封装一下，就没有字符串的形式的函数调用了，不用担心字符串会写错的问题了。
同时也不用考虑module方式下命名空间的问题，都是独立的管理模块，谁也不影响谁。
只读 vs 随意
因为state的属性会自动变成reactive的形式，所以直接获取里面的对象，也会自动变成reactive形式，这样虽然自带响应性，但是同时也可以造成直接修改状态的问题。
所以为了避免误操作，我们可以利用readonly来实现只读的状态，这样就不怕误操作导致直接修改状态了。
- formState 可读可写的状态
- getFormState 只读的状态
具体用那个，就看您喜欢了，不强求。
同步改变状态
打开、关闭弹窗，设置添加、修改状态等，都是同步改变，封装好对应的函数，组件里就可以直接调用了，这样组件实现最小获知原则，调用函数就好，不用管其他的。
代码也很简单，不多说了。
异步修改状态
loadData 里面定义一个promise的实例，实现异步返回状态的功能，这样组件里可以知道确切的加载完毕时机。
表单组件可以这样操作：
const { getFormState, loadData } = mapForm()
const formState = getFormState()
// 用于绑定表单的model
const model = reactive({
title: ''
})
watch(() => formState.id ,(v1, v2) => {
if (v1 === 0) {
// 添加状态，重置model
model.title = ''
} else {
// 修改或者只读状态，异步加载数据
// 另一种加载状态，这个成功了。
const loading = ElementPlus.ElLoading.service({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.1)'
})
loadData().then((msg) => {
// 加载成功的提示
ElementPlus.ElMessage.success({
message: msg,
type: 'success'
})
// 设置model数据
Object.assign(model, formState.model)
// 关闭加载状态
loading.close()
})
}
- 监听ID的变化，异步加载数据
在id变化的时候才需要加载对应的数据，所以这里做了一个wacth。
如果是添加的话，设置model为初始状态。
如果是修改，就调用函数异步加载数据，同时设置加载状态。
等加载结束，停止加载状态，并且设置数据给model。
这里仅仅是为了演示异步操作，才设置这种写法，不代表真实项目也是这么写的。
这样一个基本的状态管理方式就展现出来了，个人感觉还是很清爽的。