Vue3状态管理新选择：Pinia安装与使用详解，以及与Vuex的对比分析

Pinia 与 Vuex 一样，是作为 Vue 的“状态存储库”，用来实现 跨页面/组件 形式的数据状态共享。它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。

当该数据、方法在很多地方都需要使用或需要通过页面保存的数据，如显示在导航栏中用户信息，一个多步骤表单页面等，这时我们就可以使用Store了。

一、Pinia 的主要特点：

• 简单易用：Pinia 的 API 简洁明了，易于学习和使用。它提供了一些基本的操作方法，如设置状态、获取状态、删除状态等。
• 适用于 Vue 3：Pinia 是专门为 Vue 3 设计的，它充分利用了 Vue 3 的新特性，如 Composition API、Teleport 等。
• 可扩展性：Pinia 是一个可扩展的状态管理库，你可以根据自己的需求来添加更多的功能和操作方法。
• 持久化支持：Pinia 支持状态持久化，你可以轻松地将状态保存到本地存储中，并在需要时恢复状态。
• 插件化：Pinia 支持插件化，你可以通过插件来添加更多的功能，如日志记录、状态监控等。

二、如何使用：

• 安装 Pinia：使用 npm 或 yarn 安装 Pinia 库。
• 创建存储：在 Vue 应用中创建一个存储对象，用于存储所有共享状态。
• 设置状态：使用 defineState 方法来定义状态，并使用 setup 方法将状态注入到组件中。
• 操作状态：使用 useStore 钩子函数来获取存储对象，并使用其提供的方法来操作状态。
• 持久化状态：使用 persist 插件来将状态保存到本地存储中，并在需要时恢复状态。

1.安装

npm install pinia

2.定义

/ stores/counter.js

import { defineStore } from 'pinia'
//defineStore 接受一个 id，不同数据源的 id 必须是不同的
export const useCounterStore = defineStore('counter', {

//相当于data，数据
  state: () => {
    return { count: 0 }
  },

//相当于methods，方法
  actions: {
    increment() {
      this.count++
    },
  },

//相当于computed，计算属性
  getters: {
      getCount(state) {
      // 自动完成!
      return state.count
    },
  },
})

在上面的代码中，我们通过 defineStore 方法创建了一个名为 counter 的 Store。其中，id 是一个唯一的标识符，可以用来跨 Store 之间进行通信。

在 Store 中，我们定义了一个名为 count 的状态，以及名为 increment 的操作。这个操作可以通过 this 来访问当前 Store 中的状态，从而实现对状态的变更。

我们还定义了一个名为 getCount 的 getter，它可以返回 count 的值。

参数：

• state：状态的初始值，推荐使用的是一个 箭头函数，方便进行类型推断。

• getters：状态的获取，是一个对象格式；推荐配置为每个 getters 的对象属性为 箭头函数，方便进行类型推断；在使用时等同于获取该函数处理后的 state 状态结果；并且与 Vue 的计算属性一样，该方法也是惰性的，具有缓存效果。

• actions：类似 Vue 中的 methods 配置项，支持异步操作，主要作用是 处理业务逻辑并更新状态数据；另外，此时的 actions 是一个 函数集合对象，与 getters 不同的是 不建议使用箭头函数。并且函数内部的 this 就指向当前 store 的 state。

3.使用

然后你在一个组件中使用它：

import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

counter.count++

// 或使用 action

counter.increment()

<template>
{{counter.getCount}}
</template>

在上面的代码中，我们通过 useCounterStore 方法获取到了 useCounterStore Store 的实例。然后我们可以通过 counter.count 访问到当前 Store 中的状态，以及通过 counter.increment() 和 counter.getCount() 来调用相应的操作。

三、pinia和vuex的对比

特性	Vuex (Vue2)	Pinia (Vue3)
数据存储	State 存储在 Store 中	State 存储在 Store 中
数据修改	commit/mutation	action
响应式	使用 Vue 响应式系统实	使用 Vue 3 的响应式系统实现
数据获取	getters	getters
模块化	模块按照功能划分，每个模块有自己的 state、mutation、action 和 getter	模块按照功能划分，每个模块有自己的 state、action 和 getter
TypeScript 支持	需要额外安装 @vue/cli-plugin-typescript 插件，并在 store 中进行类型定义	内置 TypeScript 支持，使用起来更加方便