什么是pinia？pinia怎么使用

Pinia 是一个基于 Vue.js 3 Composition API 的状态管理库，它提供了一种简单、干净、优雅的方式来管理应用程序的状态数据。Pinia 的主要思想是“只有状态”，开发者只需聚焦于状态本身，而不需要关心太多额外的概念和复杂性。

以下是 Pinia 使用的步骤：

1. 安装 Pinia

可以通过 npm 或 yarn 安装 Pinia：

npm install pinia

or

yarn add pinia

2. 创建 Pinia 实例

首先需要创建 Pinia 实例，即在项目入口文件 main.js 中引入 Pinia 并创建实例：

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

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

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

3. 定义状态

定义状态即定义一个 store，通过 defineStore() 方法创建一个 store，并导出。这个 store 可以包含各种属性和方法，例如 state、getters、actions、mutations 等。如下面示例：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',

  state: () => ({
    count: 0,
  }),

  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  },

  actions: {
    increment() {
      this.count++
    },

    decrement() {
      this.count--
    },
  },

  mutations: {
    reset() {
      this.count = 0
    },
  },
})

4. 在组件中使用

使用 useStore() 方法获取 store，然后就可以在组件中直接使用 store 中的数据和方法。示例代码如下：

import { defineComponent } from 'vue'
import { useCounterStore } from './store'

export default defineComponent({
  setup() {
    const store = useCounterStore()

    function increment() {
      store.increment()
    }

    function decrement() {
      store.decrement()
    }

    function reset() {
      store.reset()
    }

    return {
      count: store.count,
      doubleCount: store.doubleCount,
      increment,
      decrement,
      reset,
    }
  },
})

此外，Pinia 还支持模块化，可以通过 defineStore() 方法创建多个专门的 store，用于逻辑分层管理，提高代码可读性和维护性。

总之，Pinia 是一个非常便捷、灵活、易用的状态管理库，通过其干净和简单的 API，可以更快更好地构建应用程序。