vue3: 3.如何利用 effectScope 自己实现一个青铜版pinia 一 actions篇

2023-11-21 14:50

本文主要是介绍vue3: 3.如何利用 effectScope 自己实现一个青铜版pinia 一 actions篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue3: 如何利用 effectScope 自己实现一个青铜版pinia - actions篇

上一篇我们实现了状态管理仓库的 getters, 但是实际应用中并不推荐我们直接更改store.state的值,所以我们需要实现一个actions来更新我们的状态

actions 的实现原理非常简单,只需要把action暴露出去给组件使用就行,并且actions支持同步和异步

接着上代码:

依然是创建一个store对象,store新增一个actions对象
该对象只需要在useStore的时候暴露给组件使用的store.state上就行
我们在执行useStore的时候将getters、store.actions 合并到store.state 就能实现
然后我们可以直接通过store.state[actionsName] 访问对应的actions

const store = {state: {val: 0},getters: {},actions: {add (value) {this.val += value},remove (value) {this.val -= value}},useStore () {const setUp = () => {if (!Vue.isReactive(this.state)) {// 以下的操作只需要执行一次// 因为执行setup做响应式依赖收集的时候会在每个组件执行,访问的是同一个state,该state 对象的代理实现只需要第一次就够了this.state = Vue.reactive(this.state)const _this = this// 将this.getters里面的函数取出,存到 getters 这个对象里面的值变为具有computed 计算属性的一个对象const getters = Object.keys(_this.getters || {}).reduce(function (conmputedGetters, name) {// 利用computed 计算this.getters里面的值, 并记录下来conmputedGetters[name] = Vue.computed(() => {return _this.getters[name].call(_this.state, _this.state)})return conmputedGetters}, {})// 直接将 this.actions 合并到 this.state 上就好了, action 函数里面可以直接通过 this 访问 state 对象Object.assign(this.state, getters, this.actions)}}const scope = Vue.effectScope()scope.run(setUp)return this.state}
}

然后我们创建两个子组件
不通过直接更改store.state的值去更新组件
而是通过store的 actions 去更新组件

<body><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.min.js"integrity="sha512-rCO3ZZnxh9j/Y725Iq2Cqr2lc9fi83zVeN3PFTUosktylZsCFjD13PDbKrzKjKO/idjM4KlMQC52AsoGFTAe6A=="crossorigin="anonymous"referrerpolicy="no-referrer"></script><div id="app"></div><script>const store = {state: {val: 0},getters: {},actions: {add (value) {this.val += value},remove (value) {this.val -= value}},useStore () {const setUp = () => {if (!Vue.isReactive(this.state)) {// 以下的操作只需要执行一次// 因为执行setup做响应式依赖收集的时候会在每个组件执行,访问的是同一个state,该state 对象的代理实现只需要第一次就够了this.state = Vue.reactive(this.state)const _this = this// 将this.getters里面的函数取出,存到 getters 这个对象里面的值变为具有computed 计算属性的一个对象const getters = Object.keys(_this.getters || {}).reduce(function (conmputedGetters, name) {// 利用computed 计算this.getters里面的值, 并记录下来conmputedGetters[name] = Vue.computed(() => {return _this.getters[name].call(_this.state, _this.state)})return conmputedGetters}, {})// 直接将 this.actions 合并到 this.state 上就好了, action 函数里面可以直接通过 this 访问 state 对象Object.assign(this.state, getters, this.actions)}}const scope = Vue.effectScope()scope.run(() => {// 执行setup函数,收集响应式依赖return setUp()})return this.state}}// 子组件1const childrenOne = Vue.defineComponent({name: 'children-one',setup () {// 为什么要执行useStore,因为要通过 useStore 内的setup 函数为该组件提供响应式的依赖搜集// storeA 已经是一个包含getters的最基本的状态管理对象了// 不过我们一般不建议直接修改store的值,后续会提供actions去帮助大家更改state的值const storeA = store.useStore()const add = () => {storeA.add(1)}return {add,storeA}},template: `<div><h3>children-one</h3><button @click="add">children-one add</button><br/><span>val : {{storeA.val}}</span></div>`})// 子组件2const childrenTwo = Vue.defineComponent({name: 'children-two',setup () {const storeB = store.useStore()const remove = () => {storeB.remove(2)}return {remove,storeB}},template: `<div><h3>children-two</h3><button @click="remove">children-two remove</button><br/><span>val : {{storeB.val}}</span><br/></div>`})const app = Vue.createApp({name: 'app',components: {'children-one': childrenOne,'children-two': childrenTwo,},template: `<div class='ass' ><children-one /><children-two /></div>`})app.mount('#app')</script>
</body>

我们来看下效果:

在这里插入图片描述

这样一个我们就实现了 actions

到这里一个基础的青铜版pinia基本就差不多实现了,基本实现原理就是这么多
要想达到和pinia一样的效果,比如多模块等其他优秀特性
我们还需要调整store的生成方式和数据组成等比较繁杂的内容,我们只是简单了解pinia实现原理
其他的就不深入研究了,有兴趣的小伙伴可以自己研究改造一下

这篇关于vue3: 3.如何利用 effectScope 自己实现一个青铜版pinia 一 actions篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_45123004/article/details/126452297
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/403021

相关文章

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

mybatis执行insert返回id实现详解

《mybatis执行insert返回id实现详解》MyBatis插入操作默认返回受影响行数,需通过useGeneratedKeys+keyProperty或selectKey获取主键ID,确保主键为自... 目录 两种方式获取自增 ID:1. ​​useGeneratedKeys+keyProperty(推

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被