在上一章的例子了,我们一旦刷新页面计数器的值就会归零。很多时候有些数据我们是希望能长期保存在浏览器,这可以使用 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.js 如下。

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

const pinia = createPinia()

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

export default pinia

开启持久化

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

import { defineStore } from "pinia"

export const useCounterStore = defineStore("counter", {
    state() {
        return {
            times: 0, // 点击次数
        }
    },
    getters: {
        isMoreThan10Times() {
            // 是否点击超过了 10 次
            return this.times > 10
        },
    },
    actions: {
        increase() {
            this.times++
        },
    },
    persist: true, // 开启持久化
})

$$tip

完整代码放在了 github 上,https://github.com/lalawila/pinia-counter-persist

$$