Vuex4.0（八）在Vue3环境下如何优雅的管理状态？

2023-04-25 17:44| 来源: 网络整理| 查看: 265

基于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。

这里仅仅是为了演示异步操作，才设置这种写法，不代表真实项目也是这么写的。

这样一个基本的状态管理方式就展现出来了，个人感觉还是很清爽的。

【本文地址】

公司简介

联系我们