Pinia+Router学习笔记（三）

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 = '现在我是响应式的了'相同