8、Vue 3 Pinia 使用实录：Pinia 通过插件实现持久化

嗨，我是温新

为什么需要持久化

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

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

使用持久化插件

1、安装持久化插件

$ pnpm i pinia-plugin-persistedstate

2、引入插件

main.ts

...

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

...

3、开启持久化

src/stores/info.ts

import { defineStore } from "pinia";
import { ref } from "vue";

const useInfoStore = defineStore('info', () => {
    const num = ref(1)

    return {
        num
    }
},{
    // 开启持久化
    persist:true
})

export default useInfoStore

4、使用持久化

src/App.vue

<template>
  <h3>Vue 3 Pinia 使用实录</h3>
  <div class="main">
	<button @click="incrementCounter">{{ infoStore.num }}</button>
  </div>
  
</template>

<script setup lang="ts">
	import  useInfoStore  from "@/stores/info.ts";

	const infoStore = useInfoStore()

	const incrementCounter = () => {
		infoStore.num++;
	};

</script>

<style scoped>
	.main {
	background-color: pink;
	}
</style>

5、测试

• 点击按钮进行自增
• 然后刷新页面
• 发现值没有发生变化