🍍 Not only a pinia plugin.

Last update: Jul 30, 2022

pinia-plugin-keep

NPM version

🍍 🍍 Not only a pinia plugin.

Install

npm i pinia-plugin-keep

Usage

  • main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
// ↓ import the plugin
import { keepPiniaPlugin, resetPluginPinia } from 'pinia-plugin-keep' 

import App from './App.vue'

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

pinia.use(keepPiniaPlugin) // <- use the plugin
pinia.use(resetPluginPinia) // <- use the plugin

app.use(pinia)

app.mount('#app')

Description

  • keepPiniaPlugin

Persistence your state to localStorage.

You only need to install the keepPiniaPlugin in main.ts, like the above Usage. And the plugin will keep your state in the localStorage when you use the store.

The default config is persistence the state to localStorage. You could change the config in the keepPiniaPlugin function, like the following:

pinia.use(_ => keepPiniaPlugin(_, 'session'))

So, the state will be kept in the sessionStorage.

  • resetPluginPinia

Resets the store to its initial state with a nested value pass the keypath as the argument.

When you install this plugin, your store will register a function call $resetPath, and you could use it to reset the value with state initial.

TIPS: $resetPath is options api only

For example:

  • userStore.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      token: '',
      userInfo: {
        age: 18,
        name: 'cx33'
      }
    }
  },
  // getters
  // ...
  // actions
  // ...
})
  • anywhere
import useUserStore from './userStore'

const store = useUserStore()

store.$resetPath('userInfo.age') // <- here is equal to store.$state.userInfo.age = 18

License

MIT License © 2022 JiatLn

GitHub

https://github.com/JiatLn/pinia-plugin-keep
You might also like...

Vue plugin for KaTeX

vue-katex KaTeX enables fast math typesetting for the web. vue-katex is a lightweight plugin introduces a simple way to use KaTeX in your Vue app. Enj

Jul 6, 2022

A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.

A simple Barrage plugin Base on Vue.js.  | 基于Vue.js弹幕插件.

Barrage plugin for Vue.js. Overview • Overview • Demo • Installation • Usage • Plug Options • Roadmap Introduction Baberrage is one of the popular com

Aug 10, 2022

A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

vue-model-autoset A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive. Imagine a huge form w

Jul 30, 2020

💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Jul 15, 2022

Vue plugin to match the height of elements

vue-match-heights Quick and easy method of setting element heights to be the same. You can provide an array of selectors that will be calculated in se

Apr 28, 2022

💬A Vite plugin that runs TypeScript, VLS, vue-tsc and other checkers in worker thread.

💬A Vite plugin that runs TypeScript, VLS, vue-tsc and other checkers in worker thread.

💬A Vite plugin that runs TypeScript, VLS, vue-tsc and other checkers in worker thread.

Aug 11, 2022

Logseq plugin for hypothes.is

Logseq plugin for hypothes.is

Logseq Hypothes.is Plugin Enter your API token and user address. Fetch Updates will fetch new hypothes.is notes. Selecting an URI below and clicking G

Aug 2, 2022

jsx plugin for vue sync modifier

babel-plugin-vue-jsx-sync jsx plugin for vue sync modifier, inspired by babel-plugin-jsx-v-model Demo Usage install yarn add -D babel-plugin-vue-jsx-s

Jul 30, 2020

Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

Aug 10, 2022
A simple website where your goal is to guess if a headline comes from The Onion or not

A fun little website to guess whether a headline is from The Onion or not. Headlines are obtained from the respective subreddits.

May 3, 2022
Source Code for the Course: Pinia, The Enjoyable Vue Store
Source Code for the Course: Pinia, The Enjoyable Vue Store

Pinia, The Enjoyable Vue Store This repository contains the source code for Pini

Aug 2, 2022
🍪 👮 Hackable EU Cookie Law Plugin for Vue.js
🍪 👮 Hackable EU Cookie Law Plugin for Vue.js

?? ?? Vue Cookie Law EU Cookie Law Plugin for Vue.js ?? Demo ?? Install yarn add vue-cookie-law ?? Usage <template> <footer> <cookie-law theme="

Jul 19, 2022
Vue.js 2.x plugin that helps to use id-related attributes with no side-effect

VueUniqIds A Vue.js plugin that helps to use id-related attributes with no side-effect It is a trend to use components. Components are cool, they are

Jul 20, 2021
A Vue.js plugin that affixes an element on the window while scrolling based on a relative element

Affixes an element on the screen based on a relative element Unlike other plugins, this Vue 2 component will make it easy to affix any element while s

Jun 29, 2022
A Vue.js browser-update plugin
A Vue.js browser-update plugin

x-browser-update A Vue.js browser-update plugin. Example # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev Usa

Jan 19, 2022
Barcode Scanner Plugin for Vue.js

Vue Barcode Scanner Barcode Scanner Plugin for Vue.js Features Usually in the market have a lot of barcode scanner. So we need to handle a lot of thin

Aug 3, 2022
A plugin for formatting currency for different countries in Vue

v-currency A plugin for formatting currency in Vue.js Usage Vue.use(Currency, { "type": "USD", "thousandSeparator": true, }); In order to use i

Oct 7, 2020
Vue event bus plugin listening for online/offline changes
Vue event bus plugin listening for online/offline changes

vue-connection-listener Vue event bus plugin listening for online/offline changes About Whenever the navigator's connection status changes a 'connecti

Jul 15, 2022
🎉 Custom ripple effect plugin for @vuejs
🎉 Custom ripple effect plugin for @vuejs

vue-rippler ?? Simple Vue.js plugin for custom ripple effect Live Demo Installation npm i vue-rippler --save yarn add vue-rippler CDNs jsDelivr, UNPKG

Aug 12, 2022