https://github.com/jiatln/pinia-plugin-keep

🍍 Not only a pinia plugin.
https://github.com/jiatln/pinia-plugin-keep

Last synced: about 1 month ago
JSON representation

🍍 Not only a pinia plugin.

• Host: GitHub
• URL: https://github.com/jiatln/pinia-plugin-keep
• Owner: JiatLn
• License: mit
• Created: 2022-07-15T02:36:37.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-26T06:04:07.000Z (about 2 years ago)
• Last Synced: 2024-04-27T01:22:29.234Z (7 months ago)
• Language: Vue
• Homepage:
• Size: 197 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pinia-plugin-keep

[![NPM version](https://img.shields.io/npm/v/pinia-plugin-keep?color=a1b858&label=)](https://www.npmjs.com/package/pinia-plugin-keep)

🍍🍍 Not only a pinia plugin.

## 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:

```typescript

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

```ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore({

  id: 'user',

  state: () => {

    return {

      token: '',

      userInfo: {

        age: 18,

        name: 'cx33'

      }

    }

  },

  // getters

  // ...

  // actions

  // ...

})

```

- anywhere

```ts

import useUserStore from './userStore'

const store = useUserStore()

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

```

## Install

```bash

npm i pinia-plugin-keep

```

## Usage

- main.ts

```typescript

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')

```

## TypeScript

> When adding new properties to stores, you should also extend the PiniaCustomProperties interface. 

You need to create a file like `pinia.d.ts` in your project. And add the following code:

```ts

import 'pinia'

declare module 'pinia' {

  export interface PiniaCustomProperties {

    $resetPath: (path: string) => void

  }

}

```

## License

[MIT](./LICENSE) License © 2022 [JiatLn](https://github.com/jiatln)