Vue3中使用Pina的步骤

Vue3中使用Pina的步骤如下：

1. 安装Pina:

npm install pina

2. 在Vue应用程序的入口处，注册Pina插件：

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';

const app = createApp(App);

const pinia = createPinia();

app.use(pinia);

app.mount('#app');

3. 在代码中使用Pinia（可以在组件和非组件代码中使用）：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount() {
      return this.count * 2;
    }
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

4. 在Vue组件中使用Pinia：

import { useCounterStore } from '../stores/counter';

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

    return {
      counter: counterStore,
    };
  },
};

5. 在Vue模板中使用Pinia：

<template>
  <div>
    <p>Counter: {{ counter.count }}</p>
    <p>Double Counter: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">Increment</button>
  </div>
</template>