Pinia状态管理器持久化

前言：

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

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

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

开启 Pinia 持久化的必要性取决于你的项目需求。如果你的应用需要保持状态在页面刷新后仍然可用，那么开启 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写法（我们更推荐使用组合式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写法

无论是组合式api还是选项式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,
})

拓展：

什么是pinia？

Pinia 是 Vue.js 的状态管理库，它是一个用于替代 Vuex 的轻量级解决方案。Pinia 提供了更简洁的 API 和更好的 TypeScript 支持，使得状态管理变得更加简单和直观。

以下是 Pinia 的一些主要特性：

简洁的 API：Pinia 的 API 设计更加简洁，易于理解和使用。它提供了更少的配置和更少的样板代码，使得状态管理变得更加简单和直观。

更好的 TypeScript 支持：Pinia 完全支持 TypeScript，提供了更好的类型推断和类型检查。这使得在大型项目中使用 Pinia 更加安全和可靠。

模块化：Pinia 是模块化的，每个状态都可以作为一个独立的模块进行管理。这使得状态管理更加灵活和可扩展。

支持 Vue 3：Pinia 是为 Vue 3 设计的，与 Vue 3 的生态系统（如 Vue Router 和 Vuex）无缝集成。

支持插件：Pinia 支持插件，可以扩展其功能。例如，你可以使用插件来添加持久化存储、错误处理等功能。

支持 SSR：Pinia 支持服务器端渲染（SSR），可以与 Vue 3 的 SSR 功能无缝集成。

pinia和vuex的区别？

Pinia 和 Vuex 都是 Vue.js 应用的状态管理库，但它们在设计理念、API 设计和使用方式上有一些关键的区别。以下是 Pinia 和 Vuex 之间的一些主要区别：

1. 设计理念

Vuex：遵循 Flux 架构模式，有严格的数据流方向。它将状态存储分为 state、mutations、actions 和 getters。

Pinia：设计得更加简洁和直观，去除了 mutations 的概念，使得状态更新可以直接通过 actions 完成。它的目标是提供一个更简单的 API 来处理应用的状态。

2. 模块化

Vuex：支持模块化，可以将 store 分割成多个模块，每个模块都有自己的 state、mutations、actions 和 getters。

Pinia：也支持模块化，并且提供了更加灵活的模块定义方式。Pinia 中的每个 store 都是一个独立的模块，可以单独引入和使用。

3. 状态变更

Vuex：需要通过 commit 方法来提交 mutation 来改变 state。mutation 必须是同步函数。

Pinia：允许直接在 actions 或者组件中修改 state，不需要通过额外的方法调用。这简化了代码，特别是对于同步操作。pinia中去掉了mutation。

4. 类型支持

Vuex：虽然可以通过插件或者自定义的方式添加 TypeScript 支持，但默认的 API 并不是为 TypeScript 设计的。

Pinia：从一开始就考虑到了 TypeScript 的支持，API 设计对 TypeScript 友好，使得类型推断更加自然。

5. 组合式 API

Vuex：主要基于选项式 API 设计，尽管也有 Composition API 的支持（如 useStore），但它并不是核心特性。

Pinia：完全基于 Composition API 设计，与 Vue 3 的 Composition API 结合得非常好，使得状态管理和逻辑复用更加方便。

6. 学习曲线

Vuex：由于其严格的架构和更多的概念（state, mutations, actions, getters），初学者可能会觉得有点复杂。

Pinia：API 更加简单直观，减少了概念的数量，使得新手更容易上手。

7. 社区和生态系统

Vuex：作为 Vue 生态系统的一部分，有着广泛的社区支持和大量的资源。

Pinia：相对较新，但在快速成长中，得到了 Vue 核心团队的支持，并逐渐成为官方推荐的状态管理方案。

8. 性能

Vuex：在大型应用中表现良好，但其严格的架构有时会导致一些不必要的开销。 Pinia：旨在提供更好的性能，特别是在开发体验和运行时性能方面。

总的来说，如果你正在使用 Vue 3 并且希望有一个现代化、简洁的状态管理解决方案，Pinia 是一个很好的选择。如果你已经在使用 Vuex 并且感到满意，那么你可以继续使用它。两者都是强大的工具，选择哪一个取决于你的项目需求和个人偏好。