vue3使用 pinia

Vue 3 中的 Pinia 是 Vue.js 团队推出的官方状态管理库，它基于 Vue 的响应式系统，提供了一种轻量级、易读并且与组件解耦的状态管理模式。Pinia的设计理念类似于 Redux 或者 MobX，但是更专注于简单性和易用性。

以下是使用 Pinia 的基本步骤：

1. 安装：首先需要安装 `pinia` 和相关的插件，如 `@vue/cli-plugin-pinia`（如果使用 CLI）或者通过 npm 或 yarn 安装：

npm install pinia @vue/cli-plugin-pinia
# 或者
yarn add pinia @vue/cli-plugin-pinia

2. 创建store：创建一个名为 store.js 的文件，声明并初始化 store:

import { createStore } from 'pinia';

export default createStore({
  id: 'myStore',
  state() {
    return {
      count: 0,
    };
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

3. 注册store：在 main.js 或者配置文件中注册 store 并提供给 Vue 实例：

import { createApp } from 'vue';
import App from './App.vue';
import myStore from './store';

const app = createApp(App);
app.use(myStore);

app.mount('#app');

4. 在组件中使用：通过注入 `store` 对象，可以直接访问和操作状态：

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

<script setup>
import { useStore } from 'pinia';

const store = useStore('myStore');

function increment() {
  store.increment();
}
</script>