pinia的简单基本demo

• 在组件中使用 Pinia 状态管理：

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { useCounterStore } from './store';
import {computed} from 'vue';

export default {
  setup() {
    const counterStore = useCounterStore();

    //const count = counterStore.count;//---这样直接展示处理，数值是不会变动的
    const count = computed(() => counterStore.count)//----评论的错误在此方法给解决了！！！！

    const increment = () => {
      counterStore.increment();
    };

    const decrement = () => {
      counterStore.decrement();
    };

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

在上述示例中，我们使用 useCounterStore() 函数获取了 Pinia 实例，并根据实例的状态对象和操作函数定义来进行状态管理操作。
具体地，我们使用了 counterStore.count 获取计数器的当前值，并在模板中显示；
同时，我们定义了两个方法 increment 和 decrement，分别用于触发 increment 和 decrement 操作函数，以更新计数器的值。

以上便是一个简单的 Pinia 示例，该示例涵盖了 Pinia 的基本概念和使用方式，可以作为理解和学习 Pinia 的起点。

• 上面的demo测试---页面一刷新，count值就归0 了！！！！！