pinia使用组合式

Pinia 是一个 Vue.js 状态管理库，它使用组合式 API 来管理状态。组合式 API 是 Vue.js 3.0 中引入的一种新的 API，它提供了一种更加灵活和直观的方式来组织和管理组件的状态。

使用 Pinia，我们可以通过定义一个 store 来管理应用程序的状态。一个 store 可以包含多个 state、getter、mutation 和 action，这些都是通过组合式 API 来定义的。我们可以在组件中使用 useStore() 函数来访问 store 中的状态和方法。

下面是一个使用 Pinia 的示例：

import { defineStore } from 'pinia'

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

在组件中使用：

import { useCounterStore } from './store'

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

    function handleClick() {
      counterStore.increment()
    }

    return {
      count: counterStore.count,
      doubleCount: counterStore.doubleCount,
      handleClick
    }
  }
}