Vue前端篇——Vue 3 中的集中式状态管理Pinia

前言

前面几篇文章主要是讲解了Vue3的基础语法和路由相关知识，本文开始就来讲解Vue3的高级知识点。Pinia 是一个用于 Vue.js 3 的轻量级、高效的状态管理库。它允许以组件的形式组织你的状态，并且易于集成到 Vue 项目中。下面将详细介绍 Pinia 的安装步骤，并通过一个简单的示例来演示其基本用法。

第一步：安装 Pinia

首先，安装 Pinia，跟其他插件安装一样使用npm，然后，在项目根目录下打开终端，运行以下命令来安装 Pinia：

npm install pinia

这个命令会将 Pinia 及其依赖项安装到你的项目中。

第二步：配置 Pinia

接下来开始引入Pinia，需要在 Vue 应用中配置 Pinia。打开 src/main.ts 文件，并进行如下修改：

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

// 引入 createPinia，用于创建 pinia 实例
import { createPinia } from 'pinia'

// 创建 pinia 实例
const pinia = createPinia()

// 创建 Vue 应用实例
const app = createApp(App)

// 使用 pinia 插件
app.use(pinia)

// 挂载 Vue 应用
app.mount('#app')

在这段代码中，我们首先引入了 createPinia 函数，并使用它创建了一个 Pinia 实例。然后，我们将这个实例作为插件使用在了 Vue 应用中。这样，Pinia 就被成功集成到了我们的 Vue 项目中。

演示示例

接下来就是在主组件中引入pinia，本文通过一个简单的示例来演示 Pinia 的基本用法。

1. 在 src 目录下创建一个新的文件夹 store，并在其中创建一个名为 counterStore.ts 的文件。在这个文件中，我们将定义一个简单的计数器状态：

import { defineStore } from 'pinia'

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

这里我们使用了 defineStore 函数来定义一个名为 counter 的 store。它包含一个状态 count，以及两个操作这个状态的方法：increment 和 decrement。

1. 接下来，在 src/App.vue 文件中，我们将使用这个计数器 store：

<template>
<div id="app">
<h1>Counter: {{ count }}</h1>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>

<script>
import { useCounterStore } from './store/counterStore'

export default {
setup() {
const counterStore = useCounterStore()

return {
count: counterStore.count,
increment: counterStore.increment,
decrement: counterStore.decrement
}
}
}
</script>

在 setup 函数中，我们通过 useCounterStore 获取到了计数器 store 的实例，并将其返回给模板中使用。

现在，运行你的 Vue 应用，你应该能够在页面上看到一个计数器，以及两个按钮用于增加和减少计数器的值。点击这些按钮，你会发现计数器的值会相应地增加或减少。同时，如果你打开浏览器的开发者工具，你应该能够看到 Pinia 选项，并在其中查看到你的状态和操作。

以上就是 Pinia 的基本安装步骤和一个简单的示例演示。通过这个示例，你可以看到 Pinia 如何帮助你轻松地在 Vue 应用中管理状态。