类Vuex轻量级状态管理实现

引用自 摸鱼wiki

1. vuex

vuex是一个前端广泛流行的状态管理库，主要由以下几大模块组成：

1. state：状态存储
2. getter：属性访问器
3. mutation：可以理解为一个同步的原子性事务，修改state状态
4. action：触发mutation，可进行异步操作
5. module：模块化

2. 类vuex状态库实现

得益于vue在2.6.0版本推出的observable API，我们可以用来监听对象的数据变化，实现一个简易的状态管理

2.1 自定义状态库 CustomStore 实现

主要实现了类vuex中的state、mutation、action部分

import Vue from 'vue';
import { updateUserAPI } from 'api';class CustomStore {state: {user: string,id: number}constructor() {const state = Vue.observable({user: '',id: 0,});this.state = state;}// mutationsetUser(user: string) {this.state.user = user;}setId(id: number) {this.state.id = id;}// actionasync updateUser(user: string) {try {await updateUserAPI(user);this.setUser(user);} catch (e) {console.error(e);}}
}export const customStore = new CustomStore();

2.2 在组件中调用

通过computed属性充当getter的角色，监听state的变化，并根据需要调整格式化返回值

<template><div @click="onClick">{{ id }}:{{ user }}</div>
</template><script lang="ts" setup>
import { customStore } from 'CustomStore'
import { computed } from 'vue'const id = computed(() => customStore.state.id)
const user = computed(() => customStore.state.user)function onClick() {customStore.updateUser('test')
}
</script>