Getting Started
Overview
This plugin is compatible with pinia^2.0.0, make sure you have Pinia installed before proceeding. pinia-plugin-persistence comes with many features to make persistence of Pinia stores easy and configurable with:
- An API similar to
vuex-persistedstate. - Per-store configuration.
- Custom storage and custom data serializer.
- Pre and post hydration hooks.
- Multiple configurations per store.
- Compatibility with Vue 2 and 3.
- No external dependencies.
Adding plugin to your Project
With npm
bash
npm install -D pinia-plugin-persistencenpm install -D pinia-plugin-persistenceor with yarn
bash
yarn add -D pinia-plugin-persistenceyarn add -D pinia-plugin-persistenceor with pnpm
bash
pnpm add -D pinia-plugin-persistencepnpm add -D pinia-plugin-persistenceConfiguring plugin
ts
import { createPinia } from 'pinia'
import pluginPersistence from 'pinia-plugin-persistence'
const pinia = createPinia()
pinia.use(pluginPersistence)import { createPinia } from 'pinia'
import pluginPersistence from 'pinia-plugin-persistence'
const pinia = createPinia()
pinia.use(pluginPersistence)Usage
When declaring your store, set the new persist option to true.
ts
import { defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('hello pinia')
return { someState }
},
{
persist: true,
},
)import { defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('hello pinia')
return { someState }
},
{
persist: true,
},
)Using Unreleased Commits
If you can't wait for a new release to test the latest features, you will need to clone the plugin repo to your local machine and then build and link it yourself (pnpm is required):
sh
git clone git@github.com:elonehoo/pinia-plugin-persistence.git
cd pinia-plugin-persistence
pnpm install
pnpm run build
pnpm link --global # you can use your preferred package manager for this stepgit clone git@github.com:elonehoo/pinia-plugin-persistence.git
cd pinia-plugin-persistence
pnpm install
pnpm run build
pnpm link --global # you can use your preferred package manager for this step