#vue3 #typescript #pinia #pinia-persistedstate-plugin #vuex-persistedstate

一个为 vue3 准备的和 vuex-persistedstate 类似的 pinia 插件

https://github.com/l-x-f/pinia-persistedstate-plugin

安装

1
npm install pinia-persistedstate-plugin

或者

1
yarn add pinia-persistedstate-plugin

或者

1
pnpm add pinia-persistedstate-plugin

UMD

1
<script src="https://unpkg.com/pinia-persistedstate-plugin/dist/pinia-persistedstate-plugin.umd.js"></script>

插件为 window 添加全局变量 PiniaPersistedstatePlugin

使用

在 main.ts:

1
import { createApp } from 'vue'
2
import { createPinia } from 'pinia'
3
import { createPersistedState } from 'pinia-persistedstate-plugin'
4
import App from './App.vue'
5
6
const app = createApp(App)
7
const store = createPinia()
8
9
store.use(createPersistedState())
10
11
app.use(store).mount('#app')

使用 js-cookie

1
import { createApp } from 'vue'
2
import { createPinia } from 'pinia'
3
import { createPersistedState } from 'pinia-persistedstate-plugin'
4
import App from './App.vue'
5
import Cookies from 'js-cookie'
6
7
const app = createApp(App)
8
const store = createPinia()
9
10
store.use(
11
  createPersistedState({
12
    storage: Cookies
13
  })
14
)
15
16
app.use(store).mount('#app')

选项

1
export interface Options {
2
  /**
3
   * 存储类型，默认为 `window.localStorage`
4
   *
5
   * 支持 `js-cookie` `window.localStorage` `window.sessionStorage`
6
   */
7
  storage?: Storage | Cookies
8
  /**
9
   * 存储的key值前缀，默认为 `pinia`
10
   */
11
  key: string
12
  /**
13
   * 是否开启日志，默认为 `false`
14
   */
15
  logger: boolean
16
}
#vue3 #typescript #pinia #pinia-persistedstate-plugin #vuex-persistedstate