跳到主要内容

vue状态管理及持久化存储

vue 持久化存储​

vue 的状态管理库不管是 vuex 还是 pinia,如果你不做处理的话,刷新当前页面的时候,数据会丢失,所以我们需要一个持久化的插件.

pinia-plugin-persistedstate​

介绍一个 pinia 持久化的插件,pinia-plugin-persistedstate,使用起来很简单.

src/stores/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

使用 piniaPluginPersistedstate 插件.

src/main.ts

import pinia from '@/stores'
app.use(pinia)

main 注册

src/stores/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  actions: {
    changeUserName(str: string) {
      this.someState = str
    },
  },
  persist: true,
})

模块化里面直接开启 persist: true表示开启持久化.

pinia 的用法可以看 pinia 官网.

pinia-plugin-persistedstate配置查看官网设置.

vuex-persist​

vuex-persist 作为对 vuex 的持久化插件.详细用法可以查看官网