，pinia，计数器

Pinia是Vue 3官方推荐的状态管理模式，它提供了一个轻量级、易于理解的方式来组织和管理应用的全局状态。不同于Vuex，Pinia的设计更简洁，更适合小型到中型的应用场景，特别强调了响应式的API和易于测试的特点。

计数器（Counter）是Pinia中常见的示例，用来演示如何使用Pinia来存储、更新和获取状态。一个简单的计数器可能包含两个主要操作：增加（increment）和减少（decrement）。用户可以通过调用这些方法来改变计数器的值，Pinia会确保状态的变化是响应式的，即当状态更新时，视图会自动刷新以反映新的计数。

要创建一个基本的Pinia计数器，你可以这样做：

1. 定义store：

import { createStore } from 'pinia';
export const countStore = createStore({
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

2. 在组件中使用store：

<template>
  <button @click="increment">Increment</button>
  <p>Count: {{ count }}</p>
  <button @click="decrement">Decrement</button>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useCountStore } from './store';

export default {
  setup() {
    const count = ref(countStore.count);
    const { increment, decrement } = useCountStore();

    onMounted(() => {
      // 当store初始化后，绑定count到store中的count属性
      count.value = countStore.count;
      // 当store的count变化时，count也会同步更新
      countStore.$watch('count', (newCount) => {
        count.value = newCount;
      });
    });

    return {
      increment,
      decrement,
      count,
    };
  },
};
</script>