Pinia 的使用&环境配置

2023-12-09 19:10:33

概述
在构建现代前端应用程序时，状态管理一直是一个关键课题，Pinia 是一款轻量级且易于使用的状态管理库，专为 Vue.js 应用程序设计。本文将逐步介绍如何在 Vite 脚手架项目中使用 Pinia 进行状态管理，包括 Pinia 的基本概念、安装配置、Store 创建以及如何在组件中使用 Pinia 等内容。

为什么要使用 Pinia？

与其他状态管理库相比，Pinia 具有以下几个优点：

轻量级：Pinia 非常小巧，不会对应用程序增加不必要的体积。
易于使用：Pinia 的 API 非常简单易懂，即使是新手也能快速上手。
响应式：Pinia 使用 Vue.js 的响应式系统，使您可以轻松地跟踪状态的变化。
模块化：Pinia 采用模块化的设计，您可以根据需要创建多个 Store，并将其独立管理。

如何在 Vite 脚手架项目中使用 Pinia？

安装配置

首先，需要在 Vite 脚手架项目中安装 Pinia：

npm install pinia

然后，在 main.js 文件中导入 Pinia 并将其安装到 Vue 实例中：

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

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

创建 Store

接下来，就可以创建自己的 Pinia Store 了。在 stores 文件夹下创建一个新的 .js 文件，例如 counter.js：

import { defineStore } from 'pinia'

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

在组件中使用 Pinia

在组件中使用 Pinia Store 非常简单，只需要在组件中导入 Store 并使用 useStore() 方法获取它即可。例如，在 Counter.vue 组件中：

import { useStore } from 'pinia'
import { computed } from 'vue'

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.counter.count)

    return {
      count
    }
  }
}