Pinia状态管理器持久化

2023-12-22 15:26:05

前言:

我们在做vue2开发的时候,难免会用到vuex这个状态管理器,但是我们都知道,vuex是没法做持久化的,一刷新就会丢失数据,这个时候我们又需要持久化,就得搭配缓存,比如LocalStorage,SessionStorage;而在vue3中力推使用的pinia管理器,并不需要直接搭配缓存做持久化,我们可以借助相关的插件完成这一操作。

我们什么时候该用状态管理器:

如果不打算开发大型单页应用,使用状态管理器可能是繁琐冗余的。如果你的交互够简单,最好不要使用状态管理器。但是,如果你需要构建一个中大型单页应用,需要考虑如何更好地在组件外部管理状态,状态管理器将会成为不错的选择。

安装pinia

在使用vite和vue3搭建的项目里,我们推荐使用pnpm这个包管理器,它将会比yarn和npm更快

pnpm i pinia

安装持久化插件

pnpm i pinia-plugin-persistedstate

使用插件

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

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

开启持久化

1.组合式api写法

import { defineStore } from 'pinia'

export const useAdminStore = defineStore(
  'admin',
  () => {
    const infoState = ref('Hello pinia!')
    const infoGetter = computed(() => infoState.value + 'We come!')
    function changeInfo() {
      infoState.value = 'pinia is good!'
    }
    return { infoState,infoGetter,changeInfo }
  },
  {
    persist: true,
  }
)

2.选项式api写法

import { defineStore } from 'pinia'

export const useAdminStore = defineStore('admin', {
  state: () => {
    return {
      infoState: 'Hello Pinia!',
    }
  },
  getters: {
    infoGetter: (state) => state.infoState + 'We come!',
  },
  actions: {
    changeInfo() {
      this.infoState = 'pinia is good!'
    }
  },
  persist: true,
})

文章来源:https://blog.csdn.net/yxlyttyxlytt/article/details/135146348
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。