Pinia不允许直接解构Store,因为Store背后使用的是proxy对象,直接解构会导致其失去响应式
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
const Test = useTestStore()
let { current, num } = Test
current = '失去了响应式'
</script>
<style scoped></style>
此时修改解构出来的数据将不会对模板上的内容产生任何影响。为了解决这个问题,Pinia提供了storeToRefs来为这些数据重新恢复响应式,不过要额外加上.value(和toRef相同,给里面的数据包裹一层响应式对象)
<template>
<div>pinia:{{ Test.current }}---{{ Test.name }}---{{ Test.num }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from './Store'
import { storeToRefs } from 'pinia';
const Test = useTestStore()
let { current, num } = storeToRefs(Test)
current.value = '现在我是响应式的了'
</script>
<style scoped></style>
这种用法和直接Test.current = '现在我是响应式的了'相同