编辑“︁Pinia简介”︁

= Pinia简介 =

Pinia 是 Vue.js 生态系统中一个现代化的状态管理库，专为 Vue 3 设计，同时也兼容 Vue 2。它提供了一种简单、直观的方式来管理应用程序的状态，并且具有类型安全、模块化和易于扩展的特点。Pinia 是 Vuex 的替代方案，但比 Vuex 更轻量级，API 更简洁。

== 什么是状态管理？ ==
状态管理是指在应用程序中集中存储和管理数据的过程。在大型应用中，多个组件可能需要访问或修改相同的数据，此时状态管理库（如 Pinia）可以帮助开发者更高效地管理这些共享数据。

== Pinia 的核心概念 ==
Pinia 的核心概念包括：
* '''Store（存储）'''：一个包含状态（state）、操作（actions）和计算属性（getters）的容器。
* '''State（状态）'''：存储的数据，类似于组件中的 <code>data</code>。
* '''Actions（操作）'''：用于修改状态的方法，类似于组件中的 <code>methods</code>。
* '''Getters（计算属性）'''：基于状态派生的值，类似于组件中的 <code>computed</code>。

== 为什么选择 Pinia？ ==
Pinia 具有以下优势：
* '''类型安全'''：Pinia 完全支持 TypeScript，提供更好的开发体验。
* '''模块化'''：每个 Store 都是独立的模块，易于组织和管理。
* '''轻量级'''：Pinia 的 API 比 Vuex 更简洁，学习曲线更低。
* '''DevTools 支持'''：Pinia 与 Vue DevTools 集成，方便调试。

== 安装 Pinia ==
要使用 Pinia，首先需要安装它：
<syntaxhighlight lang="bash">
npm install pinia
</syntaxhighlight>

然后在 Vue 应用中初始化 Pinia：
<syntaxhighlight lang="javascript">
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')
</syntaxhighlight>

== 创建一个简单的 Store ==
以下是一个简单的 Pinia Store 示例：
<syntaxhighlight lang="javascript">
import { defineStore } from 'pinia'

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

=== 使用 Store ===
在组件中使用 Store：
<syntaxhighlight lang="javascript">
import { useCounterStore } from '@/stores/counter'

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

    return {
      counter
    }
  }
}
</syntaxhighlight>

在模板中访问状态和操作：
<syntaxhighlight lang="html">
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">Increment</button>
  </div>
</template>
</syntaxhighlight>

== 实际应用场景 ==
Pinia 适用于以下场景：
* 管理用户登录状态。
* 存储全局配置或主题设置。
* 共享跨组件的数据（如购物车内容）。
* 处理复杂的异步逻辑（如 API 请求）。

=== 示例：购物车管理 ===
以下是一个购物车 Store 的示例：
<syntaxhighlight lang="javascript">
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addItem(item) {
      this.items.push(item)
    },
    removeItem(itemId) {
      this.items = this.items.filter(item => item.id !== itemId)
    }
  },
  getters: {
    totalItems: (state) => state.items.length,
    totalPrice: (state) => state.items.reduce((sum, item) => sum + item.price, 0)
  }
})
</syntaxhighlight>

== Pinia 与 Vuex 的比较 ==
以下是 Pinia 和 Vuex 的主要区别：
{| class="wikitable"
|-
! 特性 !! Pinia !! Vuex
|-
| 类型支持 || 完全支持 TypeScript || 部分支持
|-
| API 复杂度 || 更简单 || 更复杂
|-
| 模块化 || 天然支持 || 需要配置
|-
| 体积 || 更小 || 更大
|}

== 总结 ==
Pinia 是一个强大且易用的状态管理库，特别适合 Vue 3 应用。它提供了简洁的 API 和优秀的开发体验，是 Vuex 的现代化替代方案。通过本简介，您已经了解了 Pinia 的基本概念和使用方法。接下来，您可以深入学习 Pinia 的高级特性，如持久化存储、插件开发等。

== 参见 ==
* [[Vue.js]]
* [[状态管理]]
* [[Vuex]]

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Pinia状态管理]]