Vue Pinia getters、actions与state的功能解析与最佳实践

Vue Pinia 简介

在深入探讨 Vue Pinia 的 getters、actions 与 state 之前，先来简单了解一下 Pinia 是什么。Pinia 是 Vue.js 的新一代状态管理库，它旨在为 Vue 应用提供简洁且高效的状态管理解决方案。与 Vuex 相比，Pinia 具有更简洁的 API、更好的 TypeScript 支持以及轻量化的设计，使其在 Vue 3 项目中广受欢迎。

安装与基础使用

要在 Vue 项目中使用 Pinia，首先需要安装它。假设你使用 npm 作为包管理器，可以通过以下命令进行安装：

npm install 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 的基本安装与配置，接下来我们就可以开始使用 Pinia 的核心概念 state、getters 和 actions 了。

State：存储状态

State 的定义

state 在 Pinia 中用于存储应用的状态数据。它类似于组件中的 data 选项，但不同的是，state 中的数据是全局共享的，可在应用的多个组件中访问和修改。

定义一个 state 非常简单，以一个简单的计数器为例：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  })
})

在上述代码中，通过 defineStore 定义了一个名为 counter 的 store。state 是一个函数，返回一个对象，这个对象中的属性就是我们要存储的状态数据。这里定义了一个 count 属性，初始值为 0。

访问 State

在组件中访问 state 也很方便。假设我们有一个 Counter.vue 组件：

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'
const counterStore = useCounterStore()
</script>

通过引入并调用 useCounterStore 函数，我们可以获取到 counter store 的实例，进而访问其中的 count 状态。

修改 State

直接修改 state 中的数据也是允许的。例如，我们可以在 Counter.vue 组件中添加一个按钮来增加 count 的值：

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

<script setup>
import { useCounterStore } from '../stores/counter'
const counterStore = useCounterStore()

const increment = () => {
  counterStore.count++
}
</script>

这里通过直接操作 counterStore.count 来增加其值。然而，这种直接修改的方式在一些复杂场景下可能不利于代码的维护和调试，所以 Pinia 提供了 actions 来更好地管理状态的变化。

Getters：派生状态

Getters 的定义

getters 用于从 state 中派生出新的状态。它们类似于计算属性，只有在其依赖的 state 发生变化时才会重新计算。继续以计数器为例，假设我们想得到 count 的双倍值：

import { defineStore } from 'pinia'

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

在上述代码中，定义了一个 getters 对象，其中的 doubleCount 就是一个派生状态。它接收 state 作为参数，返回 count 的双倍值。

访问 Getters

在组件中访问 getters 和访问 state 类似：

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

<script setup>
import { useCounterStore } from '../stores/counter'
const counterStore = useCounterStore()

const increment = () => {
  counterStore.count++
}
</script>

当 count 状态发生变化时，doubleCount 会自动重新计算。

Getters 依赖其他 Getters

getters 之间也可以相互依赖。例如，我们再定义一个 tripleCount，它依赖于 doubleCount：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    tripleCount: (state, getters) => getters.doubleCount * 1.5
  }
})

这里 tripleCount 的计算依赖于 doubleCount，当 count 变化时，doubleCount 和 tripleCount 都会相应更新。

Actions：修改 State 的方法

Actions 的定义

actions 用于定义修改 state 的方法。它们可以包含异步操作，如 API 调用等。还是以计数器为例，我们用 actions 来实现 increment 功能：

import { defineStore } from 'pinia'

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

在上述代码中，actions 是一个对象，其中的 increment 方法通过 this 来访问和修改 state 中的 count。

调用 Actions

在组件中调用 actions：

<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>

这样，通过点击按钮就会调用 counterStore.increment 方法来增加 count 的值。

异步 Actions

actions 非常适合处理异步操作。例如，我们模拟一个异步的 API 调用，在获取数据后更新 state：

import { defineStore } from 'pinia'
import axios from 'axios'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null
  }),
  actions: {
    async fetchUser() {
      try {
        const response = await axios.get('/api/user')
        this.user = response.data
      } catch (error) {
        console.error('Error fetching user:', error)
      }
    }
  }
})

在 fetchUser 方法中，通过 await 等待 API 调用完成，然后将返回的数据更新到 user 状态中。在组件中调用这个 actions：

<template>
  <div>
    <button @click="fetchUser">Fetch User</button>
    <div v-if="userStore.user">
      <p>Name: {{ userStore.user.name }}</p>
      <p>Email: {{ userStore.user.email }}</p>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '../stores/user'
const userStore = useUserStore()

const fetchUser = () => {
  userStore.fetchUser()
}
</script>

点击按钮后，会触发 fetchUser 方法，进行异步 API 调用并更新用户信息。

最佳实践

组织 Store 文件

为了保持项目结构的清晰，建议将不同的 store 分别放在不同的文件中。例如，在项目的 stores 目录下，可以有 counter.js、user.js 等文件，每个文件定义一个独立的 store。

命名规范

为 store、state、getters 和 actions 采用清晰、有意义的命名。例如，store 的命名应该能够反映其管理的状态，state 的命名要直观地表示其存储的数据，getters 和 actions 的命名要准确描述其功能。

分离业务逻辑

将复杂的业务逻辑封装在 actions 中，避免在组件中直接操作 state。这样可以使组件更专注于展示，同时提高代码的可维护性和复用性。

错误处理

在 actions 中进行适当的错误处理，特别是在异步操作中。例如，在上述 fetchUser 的例子中，捕获 API 调用的错误并进行相应的日志记录或提示用户。

使用 TypeScript

由于 Pinia 对 TypeScript 有很好的支持，建议在项目中使用 TypeScript 来定义 store，这样可以在开发过程中提供更准确的类型检查和代码提示。例如：

import { defineStore } from 'pinia'
import axios from 'axios'

interface User {
  name: string
  email: string
}

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null as User | null
  }),
  actions: {
    async fetchUser() {
      try {
        const response = await axios.get<User>('/api/user')
        this.user = response.data
      } catch (error) {
        console.error('Error fetching user:', error)
      }
    }
  }
})

通过 TypeScript 定义 User 接口，明确了 user 状态的数据结构，提高了代码的可靠性。

高级用法

插件（Plugins）

Pinia 支持插件机制，通过插件可以扩展 Pinia 的功能。例如，我们可以创建一个插件来记录每次 state 的变化：

import { PiniaPluginContext } from 'pinia'

const loggerPlugin = (context: PiniaPluginContext) => {
  const { store } = context
  const initialState = JSON.stringify(store.$state)
  store.$subscribe((mutation, state) => {
    console.log(`[Pinia Logger] ${store.$id} state changed:`, {
      mutation,
      previousState: JSON.parse(initialState),
      newState: state
    })
    initialState = JSON.stringify(state)
  })
}

export default loggerPlugin

在 main.js 中使用这个插件：

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

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

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

这样，每次 state 发生变化时，都会在控制台打印出变化的详细信息。

持久化（Persistence）

在实际应用中，有时需要将 state 的数据持久化，例如存储在本地存储中，以便刷新页面后数据不丢失。可以使用 pinia-plugin-persistedstate 插件来实现这一功能。首先安装插件：

npm install 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 的 state 存储在本地存储中。你也可以进行更细粒度的配置，例如只对特定的 store 进行持久化：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  persist: true
})

通过设置 persist: true，counter store 的 state 就会被持久化到本地存储。

总结

Vue Pinia 的 state、getters 和 actions 为我们提供了一套强大且灵活的状态管理机制。通过合理地使用它们，并遵循最佳实践，我们可以构建出结构清晰、易于维护的 Vue 应用。无论是简单的计数器应用，还是复杂的大型项目，Pinia 都能有效地帮助我们管理应用的状态。同时，插件和持久化等高级用法进一步扩展了 Pinia 的功能，满足了各种不同场景的需求。希望通过本文的介绍，你能对 Pinia 的这些核心概念有更深入的理解，并在实际项目中运用自如。