pinia definiStore

### Pinia `defineStore` 使用方法

在 Vue 项目中使用 Pinia 进行状态管理时，`defineStore` 是创建 store 实例的主要方式之一[^1]。此函数接受两个参数：store 的唯一 ID 和一个选项对象。

#### 创建 Store

通过定义返回 state、getters 和 actions 对象的方法来构建 store：

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  // 定义初始状态 (state)
  state: () => ({
    count: 0,
  }),
  
  // 计算属性 (getters)
  getters: {
    doubleCount(): number {
      return this.count * 2;
    }
  },
  
  // 更改状态的动作 (actions)
  actions: {
    increment() {
      this.count++;
    }
  }
})

上述代码展示了如何利用 `defineStore` 来设置名为 `'main'` 的 store，并包含了简单的计数逻辑[^1]。

#### 使用 Setup 函数风格

除了传统的 options API 方式外，还可以采用 setup function 风格编写更简洁的语法糖形式：

// 导入必要的钩子和工具
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  // 响应式的本地状态
  const count = ref(0)

  // getter 应该被声明为计算属性
  const doubleCount = computed(() => count.value * 2)

  // action 可以像普通函数一样定义
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

这种写法使得组件内部的状态管理和业务逻辑更加直观易懂[^1]。