l-x-f / pinia-persistedstate-plugin Goto Github PK

View Code? Open in Web Editor NEW

A pinia plugin like vuex-persistedstate.

License: MIT License

HTML 6.91% TypeScript 52.86% Shell 3.89% JavaScript 26.07% Vue 10.27%

pinia-persistedstate-plugin's Introduction

pinia-persistedstate-plugin

English | 中文

A pinia plugin like vuex-persistedstate.

Install

npm install pinia-persistedstate-plugin

yarn add pinia-persistedstate-plugin

pnpm add pinia-persistedstate-plugin

The UMD build is also available on unpkg:

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

You can find the library on window.PiniaPersistedstatePlugin.

Usage

In main.ts:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'
import App from './App.vue'

const app = createApp(App)
const store = createPinia()

store.use(createPersistedState())

app.use(store).mount('#app')

use js-cookie

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-persistedstate-plugin'
import App from './App.vue'
import Cookies from 'js-cookie'

const app = createApp(App)
const store = createPinia()

store.use(
  createPersistedState({
    storage: Cookies
  })
)

app.use(store).mount('#app')

Options

export interface Options {
  /**
   * storage, default is `window.localStorage`
   *
   * support `js-cookie` `window.localStorage` `window.sessionStorage`
   */
  storage?: Storage | Cookies
  /**
   * storage key prefix, default is `pinia`
   */
  key: string
  /**
   * is open logger, default is `false`
   */
  logger: boolean
}