类Vuex轻量级状态管理实现

news/2024/11/15 2:54:54/

引用自 摸鱼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>

http://www.ppmy.cn/news/28938.html

相关文章

「牛客网C」初学者入门训练BC134,​BC136​

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练 &#x1f525;座右铭&#xff1a;“不要等到什么都没有了&#xff0c;才下定决心去做” &#x1f680;&#x1f680;&#x1f680;大家觉不错…

35岁的测试被裁,公司地位还不如00后...

国内的互联网行业发展较快&#xff0c;所以造成了技术研发类员工工作强度比较大&#xff0c;同时技术的快速更新又需要员工不断的学习新的技术。因此淘汰率也比较高&#xff0c;超过35岁的基层研发类员工&#xff0c;往往因为家庭原因、身体原因&#xff0c;比较难以跟得上工作…

互联网衰退期,测试工程师35岁之路怎么走...

国内的互联网行业发展较快&#xff0c;所以造成了技术研发类员工工作强度比较大&#xff0c;同时技术的快速更新又需要员工不断的学习新的技术。因此淘汰率也比较高&#xff0c;超过35岁的基层研发类员工&#xff0c;往往因为家庭原因、身体原因&#xff0c;比较难以跟得上工作…

JVM详解——内存结构

文章目录内存结构1、 运行时数据区2、虚拟机栈3、本地方法栈4、程序计数器5、 堆6、方法区7、运行时常量池8、内存溢出和内存泄漏9、 堆溢出内存结构 1、 运行时数据区 Java虚拟机在运行Java程序期间将管理的内存划分为不同的数据区&#xff0c;不同的区域负责不同的职能&…

力扣(LeetCode)426. 将二叉搜索树转化为排序的双向链表(2023.02.28)

将一个 二叉搜索树 就地转化为一个 已排序的双向循环链表 。 对于双向循环列表&#xff0c;你可以将左右孩子指针作为双向循环链表的前驱和后继指针&#xff0c;第一个节点的前驱是最后一个节点&#xff0c;最后一个节点的后继是第一个节点。 特别地&#xff0c;我们希望可以…

Allegro如何手动让静态铜皮避让过孔操作指导

Allegro如何手动让静态铜皮避让过孔操作指导 在用Allegro做PCB设计的时候,如果铺的是静态铜皮,铜皮铺在过孔上会造成短路,需要手动避让下,如下图 下面介绍如何手动避让,具体操作如下 点击Shape点击Manual Void/Cavity

python基础—字符串操作

&#xff08;1&#xff09;字符串&#xff1a; Python内置了一系列的数据类型&#xff0c;其中最主要的内置类型是数值类型、文本序列&#xff08;字符串&#xff09;类型、序列&#xff08;列表、元组和range&#xff09;类型、集合类型、映射&#xff08;字典&#xff09;类型…

入门Java第十五天 线程

一、多线程 1.1进程和线程 进程&#xff1a;进程就是操作系统中运行的每一个应用程序。例如&#xff1a;微信&#xff0c;QQ 线程&#xff1a;线程是进程中的每一个任务。 多线程&#xff1a;在一个进程中&#xff0c;可以同时执行多个线程。同时完成多个任务。 并发&#x…