Pinia+Router学习笔记(三)

简介: 本节记录解构Store过程中的相关操作及注意事项

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

相关文章
|
6月前
|
JavaScript
vue.router和vue.route
vue.router和vue.route
|
3月前
|
前端开发 JavaScript UED
什么是 React Router?
【8月更文挑战第31天】
28 0
|
6月前
|
JavaScript
|
缓存 JavaScript
Vue Router 学习 new Router
Vue Router 学习 new Router
143 0
|
6月前
|
缓存 移动开发 JavaScript
【学习笔记】Vue Router
【学习笔记】Vue Router
58 0
|
6月前
|
存储 资源调度 前端开发
React Router v6 完全指南(上)
React Router v6 完全指南(上)
343 0
|
移动开发 JavaScript 前端开发
React-Router
React-Router
67 0
|
JavaScript
Pinia+Router学习笔记(一)
本系列笔记内容根据B站up主“小满zs”视频教程整理而成,本节记录pinia的搭建过程
158 0
Pinia+Router学习笔记(九)
本节记录路由历史记录相关内容
72 0
|
JavaScript
Pinia+Router学习笔记(二)
本节记录修改State中值的五种方式
93 0