vue3+TS+Pinia+Vite项目实战之一

import { defineStore } from 'pinia'
import { ref } from 'vue'
 
// 使用defineStore创建一个新的store
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})
 
// 在Vue组件中使用store
export default {
  setup() {
    // 获取store实例
    const counterStore = useCounterStore()
 
    // 返回响应式数据和方法，供组件使用
    return {
      count: computed(() => counterStore.count),
      increment: counterStore.increment,
    }
  },
}

这个代码实例展示了如何在Vue 3、TypeScript和Vite环境中使用Pinia创建和使用一个简单的计数器store。首先定义了一个名为useCounterStore的store，包含一个状态count和一个行为increment。然后在Vue组件的setup函数中，通过调用useCounterStore来获取store实例，并返回可响应的数据和方法供组件使用。