pinia数据持久化

目标： 通过 Pinia 插件快速实现持久化存储。

插件文档：点击查看

用法

yarn add pinia-plugin-persistedstate
or
npm i  pinia-plugin-persistedstate

使用插件 在main.ts中注册

import { createApp } from "vue";
import App from "./App.vue";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
createApp(App).use(pinia);

模块开启持久化

const useHomeStore = defineStore("home",{
  // 开启数据持久化
  persist: true
  // ...省略
});

 

进阶用法

需求：不想所有数据都持久化处理，能不能按需持久化所需数据，怎么办？

• 可以用配置式写法，按需缓存某些模块的数据。

 

import { defineStore } from 'pinia'

export const useStore = defineStore('main', s{
  state: () => {
    return {
      someState: 'hello pinia',
      nested: {
        data: 'nested pinia',
      },
    }
  },
  // 所有数据持久化
  // persist: true,
  // 持久化存储插件其他配置
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'storekey',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ['nested.data'],
  },
})

总结：相比于vuex，pinia对于typescript的支持性更好，友好的devTools支持，pinia只有1kb，简化了很多方法的写法。

转载于：https://www.jb51.net/article/249783.htm