这篇文章主要讲解了“Pinia简单使用及数据持久化怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Pinia简单使用及数据持久化怎么实现”吧！
基本介绍
Pinia 是 Vue.js 的轻量级状态管理库
pinia和vuex4一样，也是vue官方的状态管理工具(作者是 Vue 核心团队成员）
pinia相比vuex4，对于vue3的兼容性更好
pinia相比vuex4，具备完善的类型推荐
pinia同样支持vue开发者工具,最新的开发者工具对vuex4支持不好
pinia核心概念
state: 状态
actions: 修改状态（包括同步和异步，pinia中没有mutations）
getters: 计算属性
基本使用与state
目标：掌握pinia的使用步骤
（1）安装
yarn add pinia# ornpm i pinia（2）在main.js中挂载pinia
import { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'const pinia = createPinia()createApp(App).use(pinia).mount('#app')（3）新建文件store/counter.js
import { defineStore } from 'pinia'// 创建store,命名规则： useXxxxStore// 参数1：store的唯一表示// 参数2：对象，可以提供state actions gettersconst useCounterStore = defineStore('counter', { state: () => { return { count: 0, } }, getters: { }, actions: { },})export default useCounterStore(4) 在组件中使用
<script setup>import useCounterStore from './store/counter'const counter = useCounterStore()</script><template> <h2>根组件---{{ counter.count }}</h2></template><style></style>actions的使用
目标：掌握pinia中actions的使用
在pinia中没有mutations，只有actions，不管是同步还是异步的代码，都可以在actions中完成。
（1）在actions中提供方法并且修改数据
import { defineStore } from 'pinia'// 1. 创建store// 参数1：store的唯一表示// 参数2：对象，可以提供state actions gettersconst useCounterStore = defineStore('counter', { state: () => { return { count: 0, } }, actions: { increment() { this.count++ }, incrementAsync() { setTimeout(() => { this.count++ }, 1000) }, },})export default useCounterStore（2）在组件中使用
<script setup>import useCounterStore from './store/counter'const counter = useCounterStore()</script><template> <h2>根组件---{{ counter.count }}</h2> <button @click="counter.increment">加1</button> <button @click="counter.incrementAsync">异步加1</button></template>getters的使用
pinia中的getters和vuex中的基本是一样的，也带有缓存的功能
（1）在getters中提供计算属性
import { defineStore } from 'pinia'// 1. 创建store// 参数1：store的唯一表示// 参数2：对象，可以提供state actions gettersconst useCounterStore = defineStore('counter', { state: () => { return { count: 0, } }, getters: { double() { return this.count * 2 }, }, actions: { increment() { this.count++ }, incrementAsync() { setTimeout(() => { this.count++ }, 1000) }, },})export default useCounterStore(2)在组件中使用
<h2>根组件---{{ counter.count }}</h2> <h4>{{ counter.double }}</h4>storeToRefs的使用
目标：掌握storeToRefs的使用
如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的
<script setup>import { storeToRefs } from 'pinia'import useCounterStore from './store/counter'const counter = useCounterStore()// 如果直接从pinia中解构数据，会丢失响应式const { count, double } = counter// 使用storeToRefs可以保证解构出来的数据也是响应式的const { count, double } = storeToRefs(counter)</script>pinia模块化
在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合
（1）新建store/user.js文件
import { defineStore } from 'pinia'const useUserStore = defineStore('user', { state: () => { return { name: 'zs', age: 100, } },})export default useUserStore(2)新建store/index.js
import useUserStore from './user'import useCounterStore from './counter'// 统一导出useStore方法export default function useStore() { return { user: useUserStore(), counter: useCounterStore(), }}（3）在组件中使用
<script setup>import { storeToRefs } from 'pinia'import useStore from './store'const { counter } = useStore()// 使用storeToRefs可以保证解构出来的数据也是响应式的const { count, double } = storeToRefs(counter)</script>pinia数据持久化
目标： 通过 Pinia 插件快速实现持久化存储。
插件文档：点击查看
用法
安装
yarn add pinia-plugin-persistedstateornpm i pinia-plugin-persistedstate使用插件 在main.ts中注册
import { createApp } from "vue";import App from "./App.vue";import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia();pinia.use(piniaPluginPersistedstate);createApp(App).use(pinia);模块开启持久化
const useHomeStore = defineStore("home",{ // 开启数据持久化 persist: true // ...省略});常见疑问
模块做了持久化后，以后数据会不会变，怎么办？
先读取本地的数据，如果新的请求获取到新数据，会自动把新数据覆盖掉旧的数据。
无需额外处理，插件会自己更新到最新数据。
进阶用法
需求：不想所有数据都持久化处理，能不能按需持久化所需数据，怎么办？
可以用配置式写法，按需缓存某些模块的数据。
import { defineStore } from 'pinia'export const useStore = defineStore('main', s{ state: () => { return { someState: 'hello pinia', nested: { data: 'nested pinia', }, } }, // 所有数据持久化 // persist: true, // 持久化存储插件其他配置 persist: { // 修改存储中使用的键名称，默认为当前 Store的 id key: 'storekey', // 修改为 sessionStorage，默认为 localStorage storage: window.sessionStorage, // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态) paths: ['nested.data'], },})总结：相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。
感谢各位的阅读，以上就是“Pinia简单使用及数据持久化怎么实现”的内容了，经过本文的学习后，相信大家对Pinia简单使用及数据持久化怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
