在Vue3和TypeScripts中使用pinia

定义（state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)）

// 引入pinia 和 vue
import { defineStore } from 'pinia'
import { ref, computed } from 'vue';
// 定义了一个名为 counter 的 store
export const useStore = defineStore('counter', ()=> {
    // 定义
    const count = ref(0)
    const userName = ref('')

    // Getter（计算属性）------ 只读
    const upperName = computed(() => userName.value.toUpperCase())
    // Action ------ 修改状态的方法
    function increment() {
        count.value++
    }

    function setUserName(name) {
        userName.value = name
    }
    
    
    // 重置函数
    function $reset() {
        count.value = 0
    }
    // 必须 return 所有要暴露的内容
    return {
        count,
        userName,
        increment,
        setUserName,
        $reset
    }
}

在组件中调用

<template>
  <p>Count: {{ store.count }}</p>
  <p>Upper Name: {{ store.upperName }}</p>
  <button @click="store.increment">+1</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()

// 调用 action
store.increment()
store.setUserName('Alice')

// 读取 state 或 getter（像属性一样访问）
console.log(store.count)       // 1
console.log(store.upperName)   // "ALICE"
</script>