背景
随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。
简介
本文介绍 Vue3 中如何使用 storeToRefs
实现 Pinia Store 解构。
Pinia 是 Vue 专属的状态管理库,允许跨组件或页面共享数据。
为了在提取 Pinia Store 中的属性时保持其响应性,Pinia 提供了 storeToRefs()
,它将为每一个响应式属性创建引用。storeToRefs()
适用于只使用 Store 的状态而不调用任何 action
的场景。
开发环境
分类 | 名称 | 版本 |
---|---|---|
操作系统 | Windows | Windows 11 |
IDE | Visual Studio Code | 1.91.1 |
开发步骤及源码
在 【Vue3】Pinia存储及读取数据 基础上修改功能组件 Book.vue
。
<template>
<div class="books">
<h2>图书数量:{{ bookCount }}</h2>
<h2>图书列表</h2>
<ul>
<li v-for="book in books" :key="book.id">
{{ book.title }} -- {{ book.author }}
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { useBookStore } from '@/store/book'
import { storeToRefs } from 'pinia';
const bookStore = useBookStore()
const { bookCount, books } = storeToRefs(bookStore)
</script>
<style scoped lang="scss">
.books {
background-color: aquamarine;
padding: 20px;
li {
font-size: 20px;
height: 35px;
line-height: 35px;
}
}
</style>
使用 storeToRefs
解构后,<template>
中引用数据不再需要 bookStore.
前缀。
执行命令 npm run dev
启动应用,浏览器访问:http://localhost:5173/
,与修改前页面表现一致。
注意:Pinia 中 storeToRefs
与 Vue 原生提供的 ToRefs
最大的区别在于,Pinia 中 storeToRefs
只关注 Store 中的数据,不会对此外的其他部分进行 ref
包裹。