Vue 3 & Pinia 状态管理（7） - Pinia 持久化

嗨，我是温新，一名 PHPer。

本篇目标：了解什么是 Pinia

Pinia 官方文档：https://pinia.web3doc.top/introduction.html

为什么需要持久化

防止页面刷新后数据丢失。

持久化的实现：一是使用 sessionStroage 或 localStroage ，另外使用插件。本篇案例使用插件形式。

使用持久化插件

插件名称：pinia-plugin-persistedstate

步骤一：安装插件

npm i pinia-plugin-persistedstate

步骤二：引入插件

// main.ts
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)

步骤三：开启持久化

// src/stores/user.ts

import { defineStore } from 'pinia'
import {ref, computed} from 'vue'

export default defineStore('user', () => {
	const age = ref(4)
}, {
  persist: true
})

persist: true 用于开启持久化

步骤四：模板使用

<!-- src/App.vue -->

<template>
  <div>
    <input type="number" v-model="age">
  </div>
</template>

<script setup lang="ts">
    import { toRefs } from 'vue'
    import useUserStore from './stores/user'
    const {name} = toRefs(userStore)
</script>

点击增加 age，然后刷新页面，会页面 age 的值没有恢复为原始值。