Vue3中使用Pinia详解

<template>
  <div>
    <h1>Vue 3 和 Pinia 的学习</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
import { defineComponent, computed } from 'vue';
import { useStore } from './store';
 
export default defineComponent({
  setup() {
    // 使用Pinia的store
    const store = useStore();
 
    // 返回计算属性，计算state中的count值
    const count = computed(() => store.count);
 
    // 定义一个方法用来触发action中的increment方法
    function increment() {
      store.increment();
    }
 
    // 返回计算属性和方法供模板使用
    return {
      count,
      increment
    };
  }
});
</script>

这段代码展示了如何在Vue 3应用中使用Pinia来管理状态。首先，我们从Pinia的store模块导入了useStore函数。在setup函数中，我们创建了一个名为store的Pinia存储实例，并定义了一个计算属性count来获取状态值，以及一个方法increment来触发修改状态的动作。最后，我们将这个count和increment返回到模板中，并在模板中显示计数和定义一个按钮来调用increment方法。