小白也懂的 Pinia 基础知识全解

### Pinia Vue.js 状态管理库使用指南 #### 安装 Pinia 为了在项目中集成 Pinia，可以通过 npm 或 yarn 进行安装： ```bash npm install pinia ``` 或者 ```bash yarn add pinia ``` 完成安装之后，在创建 Vue 应用实例之前初始化 Pinia。 #### 初始化并配置 Pinia 下面展示如何在一个新项目里设置 Pinia: ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' const app = createApp(App) // 创建一个新的 Pinia 实例 app.use(createPinia()) app.mount('#app') ``` 这段代码展示了怎样引入 `createPinia` 函数，并将其作为插件注册到 Vue 应用程序中[^1]。 #### 定义 Store (商店) 定义一个简单的 store 可以通过调用 `defineStore` 方法来实现。这里有一个计数器的例子： ```typescript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, }, }) ``` 此片段说明了如何利用 `defineStore` 来构建一个具有基本功能的 store，其中包含了状态(state)和动作(actions)。 #### 访问 Store 数据 组件内部访问 store 非常简单，只需要导入相应的 store 并调用即可： ```html <template> <div>{{ counter.count }}</div> <button @click="increment">Increment</button> </template> <script setup> import { useCounterStore } from './stores/counter' const counter = useCounterStore() function increment() { counter.increment() } </script> ``` 上述模板显示了如何在单文件组件(SFCs)内获取 store 的数据以及触发其方法。 #### 查看 Pinia Store 在 Vue Devtools 中的表现 一旦设置了 Pinia stores 后，就可以借助 Vue Devtools 工具查看这些 store 的实时变化情况。打开浏览器中的开发者工具，切换至 Vue 标签页就能看到所有已定义好的 store 列表及其当前的状态值。