Vue Pinia 基于Composition API的状态管理库入门指南

什么是 Vue Pinia

Vue Pinia 是 Vue.js 应用程序的状态管理库，它基于 Composition API 构建，为 Vue 开发者提供了一种简单且高效的方式来管理应用程序的状态。在大型 Vue 应用中，状态管理变得尤为重要，它可以帮助我们更好地组织和共享数据，使应用的逻辑更加清晰和易于维护。

Pinia 具有以下几个显著特点：

基于 Composition API：与 Vue 3 的 Composition API 紧密结合，使得代码更加简洁和可维护。开发者可以利用 Composition API 的优势，如逻辑复用、代码组织等，来管理应用的状态。
轻量级：Pinia 设计得非常轻量级，几乎没有额外的负担。它的核心代码量小，不会给应用带来过多的性能开销。
支持 TypeScript：对 TypeScript 有良好的支持，在编写状态管理逻辑时能够享受到 TypeScript 的类型检查和智能提示，提高代码的健壮性和可维护性。
模块化：Pinia 允许将状态管理逻辑拆分成多个模块，每个模块负责管理一部分特定的状态，这种模块化的设计使得代码更易于理解和维护。

安装与设置

在开始使用 Pinia 之前，我们需要先将其安装到项目中。如果你的项目是基于 Vue 3 创建的，可以使用以下命令安装 Pinia：

npm install pinia
# 或者使用 yarn
yarn add pinia

安装完成后，在你的 Vue 应用入口文件（通常是 main.js）中进行设置：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

通过上述代码，我们创建了一个 Pinia 实例，并将其安装到 Vue 应用中。这样，Pinia 就可以在整个应用中使用了。

创建 Store

在 Pinia 中，状态管理的核心概念是 store。一个 store 可以理解为一个容器，用于存储和管理应用的特定状态。每个 store 都是一个独立的模块，有自己的状态、getters 和 actions。

使用 defineStore 定义 Store

要定义一个 store，我们使用 defineStore 函数。defineStore 接受两个参数：

store 的唯一标识符：一个字符串，用于在整个应用中唯一标识这个 store。
定义 store 的选项对象：包含状态、getters 和 actions 的定义。

以下是一个简单的示例：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

在上述示例中：

state：是一个函数，返回一个对象，这个对象包含了 store 的初始状态。这里我们定义了一个 count 状态，初始值为 0。
getters：用于定义基于状态的派生值。doubleCount 是一个 getter，它返回 count 的两倍。
actions：用于定义修改状态或执行异步操作的方法。increment 方法用于将 count 状态加 1。

在组件中使用 Store

定义好 store 后，我们就可以在 Vue 组件中使用它了。在基于 Composition API 的组件中，我们通过调用 useStore 函数来获取 store 实例。

简单使用示例

假设我们有一个 Counter.vue 组件，内容如下：

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
    <p>Double Count: {{ counterStore.doubleCount }}</p>
    <button @click="counterStore.increment">Increment</button>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter'

const counterStore = useCounterStore()
</script>

在这个组件中：

我们首先导入了 useCounterStore 函数。
然后通过调用 useCounterStore 获取 store 实例，并将其赋值给 counterStore。
在模板中，我们直接使用 counterStore.count 和 counterStore.doubleCount 来显示状态和派生值，通过 counterStore.increment 方法来触发状态的改变。

响应式原理

Pinia 的状态是响应式的，这意味着当状态发生变化时，依赖于该状态的组件会自动重新渲染。Pinia 利用 Vue 3 的响应式系统来实现这一点。

在前面的 counter store 示例中，当我们调用 increment 方法改变 count 状态时，组件中依赖于 count 和 doubleCount 的部分会自动更新并重新渲染。这是因为 Pinia 会自动追踪对状态的访问和修改，将其与依赖的组件建立关联。

状态持久化

在实际应用中，我们可能希望在页面刷新或重新加载时保持 store 中的状态。这就需要进行状态持久化。

使用插件实现状态持久化

有一些第三方插件可以帮助我们实现 Pinia 的状态持久化，比如 pinia-plugin-persistedstate。

首先安装该插件：

npm install pinia-plugin-persistedstate
# 或者使用 yarn
yarn add pinia-plugin-persistedstate

然后在 main.js 中配置插件：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.mount('#app')

配置完成后，我们可以在 store 中通过 persist 选项来指定需要持久化的状态：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
  },
  persist: true
})

在上述示例中，我们将 persist 设置为 true，表示整个 store 的状态都要持久化。pinia-plugin-persistedstate 默认会将状态存储在 localStorage 中，并且使用 store 的唯一标识符作为 localStorage 的键名。

模块化与组织

随着应用的增长，我们可能需要管理多个不同的状态，这时候就需要将状态管理逻辑进行模块化组织。

创建多个 Store

我们可以为不同的功能模块创建不同的 store。例如，除了前面的 counter store，我们还可以创建一个 user store 来管理用户相关的状态：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 0
  }),
  getters: {
    fullInfo: (state) => `Name: ${state.name}, Age: ${state.age}`
  },
  actions: {
    setUserInfo(name, age) {
      this.name = name
      this.age = age
    }
  }
})

在组件中使用多个 store 也很简单：

<template>
  <div>
    <h2>User Information</h2>
    <p>{{ userStore.fullInfo }}</p>
    <button @click="userStore.setUserInfo('John', 30)">Set User Info</button>
  </div>
</template>

<script setup>
import { useUserStore } from './stores/user'

const userStore = useUserStore()
</script>

模块嵌套

在某些情况下，我们可能需要在一个 store 中嵌套另一个 store。虽然 Pinia 本身没有直接提供嵌套 store 的功能，但我们可以通过在 store 的状态中引用其他 store 实例来模拟这种效果。

例如，假设我们有一个 order store，它依赖于 user store 中的用户信息：

import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useOrderStore = defineStore('order', {
  state: () => ({
    orderItems: []
  }),
  getters: {
    orderInfo: (state) => {
      const userStore = useUserStore()
      return `Order by ${userStore.name}, Items: ${state.orderItems.length}`
    }
  },
  actions: {
    addOrderItem(item) {
      this.orderItems.push(item)
    }
  }
})

在这个例子中，order store 的 orderInfo getter 中引用了 user store 的 name 状态。

与 Vuex 的比较

对于熟悉 Vuex 的开发者来说，可能会想了解 Pinia 与 Vuex 的区别。

语法与 API

Vuex：在 Vuex 中，定义 store 需要使用 Vuex.Store 构造函数，并且使用 mutations 来修改状态，actions 来处理异步操作。语法相对较为复杂，尤其是在处理复杂的状态管理逻辑时。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

Pinia：Pinia 使用 defineStore 函数来定义 store，状态、getters 和 actions 都在一个对象中定义，更加简洁明了。同时，它基于 Composition API，代码结构与 Vue 3 的组件开发更加一致。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    incrementAsync() {
      setTimeout(() => {
        this.increment()
      }, 1000)
    }
  }
})

插件与生态系统

Vuex：有一个成熟的插件生态系统，例如 vuex-router-sync 可以方便地将路由状态与 Vuex 状态同步。
Pinia：虽然生态系统相对 Vuex 没有那么庞大，但在不断发展中。像前面提到的 pinia-plugin-persistedstate 可以实现状态持久化。

性能与大小

Vuex：由于其功能的丰富性，体积相对较大，在一些小型应用中可能会带来不必要的性能开销。
Pinia：设计得非常轻量级，几乎没有额外的负担，更适合各种规模的应用，尤其是小型和中型应用。

高级用法

动态添加和使用 Store

在某些情况下，我们可能需要动态地创建和使用 store。Pinia 允许我们这样做。

首先，我们可以在运行时定义 store：

import { defineStore, createPinia } from 'pinia'

const pinia = createPinia()

// 动态定义一个 store
const useDynamicStore = defineStore('dynamic', {
  state: () => ({
    data: 'Initial data'
  }),
  getters: {
    reversedData: (state) => state.data.split('').reverse().join('')
  },
  actions: {
    updateData(newData) {
      this.data = newData
    }
  }
})

// 在组件中使用动态 store
import { useStore } from 'pinia'

export default {
  setup() {
    const dynamicStore = useStore('dynamic')
    return {
      dynamicStore
    }
  }
}

在上述代码中，我们在运行时定义了一个 dynamic store，然后在组件中通过 useStore 函数获取并使用它。

依赖注入

Pinia 支持依赖注入，这在一些复杂的组件结构中非常有用。我们可以通过 provide 和 inject 来实现依赖注入。

例如，假设我们有一个父组件 Parent.vue 和一个子组件 Child.vue，父组件提供一个 store 实例给子组件：

<!-- Parent.vue -->
<template>
  <Child />
</template>

<script setup>
import { useCounterStore } from './stores/counter'
import Child from './Child.vue'

const counterStore = useCounterStore()

provide('counterStore', counterStore)
</script>

<!-- Child.vue -->
<template>
  <div>
    <p>Count from injected store: {{ counterStore.count }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue'

const counterStore = inject('counterStore')
</script>

在这个例子中，父组件通过 provide 提供 counterStore，子组件通过 inject 获取并使用它。

最佳实践

遵循单一职责原则：每个 store 应该只负责管理一种特定类型的状态，这样可以使代码更易于理解和维护。例如，将用户相关的状态放在 user store 中，将购物车相关的状态放在 cart store 中。
合理使用 getters：getters 应该只用于计算基于状态的派生值，避免在 getters 中执行副作用操作。例如，不要在 getters 中发起网络请求。
保持 actions 简洁：actions 应该专注于处理状态的修改和异步操作。如果一个 action 逻辑过于复杂，可以考虑将其拆分成多个更小的方法。
使用 TypeScript：由于 Pinia 对 TypeScript 有良好的支持，建议在项目中使用 TypeScript 来编写 store 逻辑，这样可以获得更好的类型检查和代码提示。

通过以上对 Vue Pinia 的详细介绍，你应该对如何使用 Pinia 进行状态管理有了深入的了解。无论是小型项目还是大型应用，Pinia 都能提供一种简单、高效且可维护的状态管理解决方案。希望你在实际项目中能够充分发挥 Pinia 的优势，打造出优秀的 Vue 应用。