Pinia 解构store

# 直接解构

不具有响应性

const Test = useTestStore()
 
 
const { current, name } = Test
 
console.log(current, name);

1
2
3
4
5
6

# 实例

修改Test.current 解构完之后的数据不会变

而源数据是会变的

<template>
  <div>origin value {{Test.current}}</div> <!--增值-->
  <div>
    pinia:{{ current }}
    <button @click="change">change</button>
  </div>
</template>

<script setup lang='ts'>
import { useTestStore } from './store'

const Test = useTestStore()

const change = () => {
  Test.current++
}

const { current } = Test

console.log(current);// 1
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 解决方案

使用 storeToRefs

import { storeToRefs } from 'pinia'
 
const Test = useTestStore()
 
const { current } = storeToRefs(Test)

1
2
3
4
5

其原理跟toRefs 一样

# 源码

通过toRaw使store变回原始数据防止重复代理

循环store通过isRef isReactive 判断；如果是响应式对象直接拷贝一份给refs对象，将其原始对象包裹toRef 使其变为响应式对象

上次更新: 2024/08/14, 04:14:33

← Pinia state Pinia Actions→