什么是pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态

什么是本地持久化

本地持久化是将数据保存到本地，以便在应用程序或系统重启后仍能恢复数据的技术

安装

// 安装 pinia
pnpm add pinia

// 安装本地持久化插件
pnpm add pinia-plugin-persistedstate

创建一个 pinia 实例 (根 store)，进行持久化设置，并将其传递给应用

创建一个 src/store/index.ts 的文件，在文件内创建一个 pinia 的实例，进行持久化配置，并传递给应用

// src/store/index.ts
import type { App } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'

// 创建 pinia 实例
const store = createPinia()

// 本地持久化
store.use(
    // 初始化带有全局选项的插件，这些选项成为应用程序中所有 store 的默认选项
    createPersistedState({
        // 全局持久性选项：在此示例中，每个声明 persist: true 的 store 将默认地将数据保存到 localStorage 中
        storage: localStorage, 

        // 全局密钥选项：全局 key 选项接受传递给存储键的函数，并且应该返回一个字符串，以成为新的存储key
        key: id => `__persisted__${id}`,
    }),
)

// 通过 setupStore 函数将 pinia 实例传递给 app 应用
export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store }

注册 Pinia 插件

在 src/main.ts 中调用 setupStore(app) 函数，并将应用实例作为参数传入

// src/main.ts

const app = createApp(App);

// 挂载 pinia 状态管理
setupStore(app);

app.mount('#app');

注意：如何使用本地持久化

只有在定义 store 时，配置了 persist: true 时，当前 store 才会被持久化到本地

export const useCounterStore = defineStore(
    'counter',
    () => {
        const count = ref(0)
        function increment() { count.value++  }
        return { count, increment }
    },
    {
        persist: true, // 只有设置了此选项的 store，才会被持久化到本地；
    }
)