在上一章的例子了,我们一旦刷新页面计数器的值就会归零。很多时候有些数据我们是希望能长期保存在浏览器,这可以使用 pinia-plugin-persistedstate 插件实现。

$$tip

更多信息,查看 pinia-plugin-persistedstate 的 github 页面, https://github.com/prazdevs/pinia-plugin-persistedstate

$$

持久化

对上一章的例子做下修改,使其数据能持久化保存在浏览器。

安装

npm install pinia-plugin-persistedstate

应用插件

pinia-plugin-persistedstate 是 pinia 的一个插件,我们需要绑定到 pinia 上, 修改 pinia/index.ts 如下。

// pinia/index.ts

import { createPinia } from "pinia"
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"

const pinia = createPinia()

pinia.use(piniaPluginPersistedstate) // 绑定持久化插件

export default pinia

开启持久化

需要应用持久化的 store 加上 persist: true 的配置,修改 stores/counter.ts 如下。

// stores/counter.ts

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

export const useCounterStore = defineStore(
    "counter",
    () => {
        const count = ref(0)

        const doubleCount = computed(() => count.value * 2)

        function increment() {
            count.value++
        }

        return {
            count,
            doubleCount,
            increment,
        }
    },
    {
        persist: true, // 开启持久化
    }
)