Pinia状态管理器持久化

前言：

我们在做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,
})