vue3 store使用

在 Vue 3 中使用 Pinia 创建和使用 Store 是相对简单的。下面是一个基本的示例来演示如何使用 Pinia：

首先，安装 Pinia：

npm install pinia

然后，创建一个 Store 文件，比如 `counter.js`：

import { createPinia } from 'pinia';

// 创建 Pinia 实例
const pinia = createPinia();

// 创建 Counter Store
export const counterStore = pinia.defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

// 导出 Pinia 实例
export { pinia };

接下来，在你的 Vue 应用程序的入口文件中，注册 Pinia 并将其与 Vue 实例关联起来：

import { createApp } from 'vue';
import App from './App.vue';
import { pinia } from './counter';

const app = createApp(App);

// 注册 Pinia
app.use(pinia);

app.mount('#app');

现在你可以在你的组件中使用 Pinia 的 Store 了。例如，在一个组件中引入并使用 `counterStore`：

import { defineComponent } from 'vue';
import { counterStore } from './counter';

export default defineComponent({
  setup() {
    // 使用 counterStore
    const store = counterStore();

    return {
      store,
    };
  },
});

在模板中使用 `store` 对象中的状态和操作：

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