关于Vue3+pinia+ts的学习笔记

// 在Vue3和Pinia中使用TypeScript定义状态管理的store
import { defineStore } from 'pinia'
 
// 定义一个名为'counter'的store
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});
 
// 在Vue组件中使用store
<template>
  <div>{{ counterStore.count }}</div>
  <button @click="counterStore.increment">增加</button>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from './path/to/your/store';
 
export default defineComponent({
  setup() {
    const counterStore = useCounterStore();
    return { counterStore };
  },
});
</script>

这个例子展示了如何在Vue3和Pinia中使用TypeScript定义一个简单的状态管理store，并在Vue组件中使用它。通过这个例子，开发者可以学习如何在真实的Vue项目中应用和管理状态。