pinia
pinia 文档
本地化存储
install
javascript# npm npm install pinia-plugin-persist # yarn yarn add pinia-plugin-persist # pnpm pnpm add pinia-plugin-persist
usage
javascriptimport { createPinia } from 'pinia' import piniaPersist from 'pinia-plugin-persist' const pinia = createPinia() pinia.use(piniaPersist)
- 基本用法
javascriptimport { defineStore } from "pinia" export const useStore = defineStore("YourStore", () => { const foo = ref("foo") const bar = ref("bar") return { foo, bar } }, { enabled: true }) //enable 开启后 默认会对整个 store的state 内容惊醒sessionStorage 存储
- 进阶用法
javascriptimport { defineStore } from "pinia" import Cookies from 'js-cookie' const cookiesStorage = { setItem (key, state) { return Cookies.set('accessToken', state.accessToken, { expires: 3 }) }, getItem (key) { return JSON.stringify({ accessToken: Cookies.getJSON('accessToken'), }) }, } export const useStore = defineStore("YourStore", () => { const foo = ref("foo") const bar = ref("bar") return { foo, bar } , { enabled: true, strategies: [{ // 自定义存储的 key,默认是 store.$id key: "custom storageKey", // 可以指定任何 extends Storage 的实例,默认是 sessionStorage // storage: localStorage, storage: cookiesStorage,//自定义存储对象也可以 // state 中的字段名,按组打包储存 paths: ["foo", "bar"] }] )