pinia数据持久化

1.用法

1.1安装

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

1.2 使用插件 在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);

1.3模块开启持久化

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

2.常见疑问

• 模块做了持久化后，以后数据会不会变，怎么办？
  • 先读取本地的数据，如果新的请求获取到新数据，会自动把新数据覆盖掉旧的数据。
  • 无需额外处理，插件会自己更新到最新数据。

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

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

 

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  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，简化了很多方法的写法。