Vue3 使用存储库Pinia（state）

**Vue3 中的 Pinia**

在 Vue3 中，Pinia 是一个流行的状态管理库，它提供了一种高效、易用的方式来管理应用程序中的状态。与其他状态管理库相比，Pinia 的设计更简单，更易于使用。

### **什么是 Pinia？**

Pinia 是一个轻量级的状态管理库，它允许你在 Vue3 应用中存储和共享数据。它提供了一种高效、易用的方式来管理应用程序中的状态。

### **为什么要使用 Pinia？**

有很多原因可以使用 Pinia：

* **简洁**: Pinia 的 API 设计非常简单，易于理解。
* **高效**: Pinia 使用了 Vue3 的响应式系统，从而实现了高效的状态更新。
* **易用**: Pinia 提供了一种直观的方式来存储和共享数据。

### **如何使用 Pinia？**

以下是使用 Pinia 的基本步骤：

1. **安装 Pinia**：首先，你需要在你的 Vue3 应用中安装 Pinia。可以使用 npm 或 yarn 来安装。
2. **创建 Pinia Store**：接下来，你需要创建一个 Pinia Store，这个 Store 将用于存储和共享数据。
3. **使用 Pinia Store**：最后，你可以在你的组件中使用 Pinia Store 来获取或设置数据。

### **Pinia 的基本概念**

以下是 Pinia 的一些基本概念：

* **Store**：一个 Store 是 Pinia 中用于存储和共享数据的对象。
* **State**：一个 State 是 Store 中的一个属性，它代表了应用程序中的某个状态。
* **Getter**：一个 Getter 是一个函数，它返回 Store 中的一个 State 的值。
* **Setter**：一个 Setter 是一个函数，它用于设置 Store 中的一个 State 的值。

### **Pinia 的基本 API**

以下是 Pinia 的一些基本 API：

* `createStore()`：这个方法用于创建一个新的 Pinia Store。
* `useStore()`：这个方法用于获取当前的 Pinia Store。
* `$state`：这是一个属性，它代表了当前的 Store 中的一个 State 的值。

### **示例代码**

以下是使用 Pinia 的示例代码：

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

const pinia = createPinia()

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

javascript// store.jsimport { defineStore } from 'pinia'

export const useStore = defineStore('main', {
 state: () => ({ count:0 }),
 actions: {
 increment() {
 this.count++
 },
 },
})

javascript// App.vue<template>
 <div>
 <p>Count: {{ count }}</p>
 <button @click="increment">+</button>
 </div>
</template>

<script>
import { useStore } from './store'

export default {
 setup() {
 const store = useStore()
 return { ...store, increment: () => store.increment() }
 },
}
</script>