类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;
  }

  // mutation
  setUser(user: string) {
    this.state.user = user;
  }

  setId(id: number) {
    this.state.id = id;
  }

  // action
  async 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>