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

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

当下vue3如此火热，vue3的下一代轻量级状态管理工具pinia也是我们必不可少的学习对象，想要学习pinia，就要知道它的实现原理
现在我们就手把手实现一个自己的青铜版pinia

pinia的核心实现原理和组合式api effectScope 密不可分，那么组合式api effectScope 有什么作用呢，我们可以看下官网的描述：


创建一个 effect 作用域，可以捕获其中所创建的响应式副作用 (即计算属性和侦听器)，这样捕获到的副作用可以一起处理

1
2
3

这段描述说明 effectScope() 执行后会创建一个副作用域，并返回一个对象，对象上面提供一个run方法和stop方法
run方法接受一个函数，函数内部执行的所有关于响应式的代码都会被捕获对应的依赖，当具有响应式代理对象属性发生变化的时候，所有依赖于该对象属性的组件都会被重新渲染
stop函数执行则是可以使run 函数内的所有关于代理对象的响应式都失效，也就是将收集到的依赖全部释放

有点绕，没关系，我们直接上代码

第一步，先实现一个最简单的数据管理仓库模块对象

首先创建一个store对象，对象上有 state 对象，和useStore 函数
useStore 函数和pinia的useStore 的功能和使用方式类似
函数内创建一个 setup 函数，该函数和vue3的setup 函数类似
里面利用 reactive 执行创建响应式对象,并记录下来保存到 store.state 上,然后返回store.state给组件使用

那么如何让使用 store.state 的组件具有当store.state的属性值改变后而重新执行渲染功能呢
这个时候 effectScope API的作用就来了，他可以帮我们完成这个事情
effectScope() 执行得到一个 scope 对象，执行 scope.run()的时候会将传入run函数里面的函数执行，我们只需要将setup函数传入
setup函数里面的所有关于响应式对象的使用依赖都会被收集，每当一个新的组件引用 useStore 的时候都会创建一个新的 scope.run(setup) 执行,每个使用到useStore的组件都会被收集依赖
这样每个依赖到store.state的组件都能在store.state改变的时候进行重新渲染

const store = {
  state: {
    val: 0
  },
  useStore () {
    // 创建响应式的 setup 函数，效果和vue中的 setup 是一样的，都是用来收集数据响应式依赖的
    const setup = () => {
      // 让 this.state 成为响应式代理对象
      // 先判断 this.state 是否是一个reactive生成的响应式的代理对象，是的话就不需要 this.state 再次成为响应式代理对象了
      if (!Vue.isReactive(this.state)) {
        this.state = Vue.reactive(this.state)
      }
    }
    const scope = Vue.effectScope()
    // 执行run 的时候会执行setup函数，收集依赖
    scope.run(setup)
    return this.state
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后我们创建两个子组件并使用这个store

<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
      },
      useStore () {
        // 创建响应式的setUp函数，效果和vue中的setUp 是一样的，都是用来收集数据响应式依赖的
        const setup = () => {
          // 让 this.state 成为响应式代理对象
          // 先判断 this.state 是否是一个reactive生成的响应式的代理对象，是的话就不需要 this.state 再次成为响应式代理对象了
          if (!Vue.isReactive(this.state)) {
            this.state = Vue.reactive(this.state)
          }
        }
        const scope = Vue.effectScope()
        // 执行run 的时候会执行setup函数，收集响应式依赖
        scope.run(setup)
        return this.state
      }
    }
    // 子组件1
    const childrenOne = Vue.defineComponent({
      name: 'children-one',
      setup () {
        // 为什么要执行useStore,因为要通过 useStore 内的setup 函数为该组件提供响应式的依赖搜集
        // storeA 已经是一个最基本的状态管理对象了
        // 不过我们一般不建议直接修改store的值，后续会提供actions去帮助大家更改state的值
        const storeA = store.useStore()
        const add = () => {
          storeA.val += 1
          // 也可以直接通过 store.state 去访问state对象
          // store.state.val +=1
        }
        return {
          add,
          storeA,
          store
        }
      },
      template: `
        
          children-one
          
          

          {{storeA.val}}
          

          store: {{store.state.val}}
        
      `
    })
    // 子组件2
    const childrenTwo = Vue.defineComponent({
      name: 'children-two',
      setup () {
        const storeB = store.useStore()
        const remove = () => {
          storeB.val -= 1
        }
        return {
          remove,
          storeB
        }
      },
      template: `
        
          children-two
          
          

          {{storeB.val}}
        
      `
    })
    
    const app = Vue.createApp({
      name: 'app',
      components: {
        'children-one': childrenOne,
        'children-two': childrenTwo,
      },
      template: `
        
          
          
        
      `
    })
    app.mount('#app')
  script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

因为store.state 是具有响应式的代理对象，所以我们可以通过直接改变store.state.val 的值去更新对应组件

我们来看下效果：
在这里插入图片描述

这样一个简单的状态管理仓库的实现就完成了，下一篇我会实现计算属性 getters

相关阅读:
Java 遍历指定路径下的所有文件和子文件夹
 CentOS Integration SIG 正式成立
 Javascript中setTimeout设置为0的意义？
springboot自动缓存
 设计模式-单例模式
 在使用tomcat运行项目时，遇到端口80被占用的情况问题解决
 RabbitMQ（六）死信队列
 java-net-php-python-jsp高校师生交流平台计算机毕业设计程序
 Eureka Series : 5G + RTC
美的、格力逆境求生
原文地址：https://blog.csdn.net/weixin_45123004/article/details/126451038