vue3中pinia的使用

在Vue 3中使用Pinia，你需要按照以下步骤进行设置：

1. 安装Pinia：使用npm或yarn安装Pinia库。

npm install pinia

2. 创建一个store：在你的应用程序中，创建一个store文件夹并在其中创建一个store.js文件。

import { createPinia } from 'pinia';

const store = createPinia();

export default store;

3. 在main.js中使用Pinia：在你的主入口文件（通常是main.js）中，引入创建的store并将其与Vue应用程序关联。

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

const app = createApp(App);
app.use(store);
app.mount('#app');

4. 创建和使用store模块：在store文件夹中创建一个模块文件，例如counter.js，并定义您的store逻辑。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

5. 在组件中使用store：在您的Vue组件中，可以使用`useStore`函数来访问您的store实例，并使用它来获取状态和调用操作。

import { useStore } from 'pinia';

export default {
  setup() {
    const store = useStore();

    return {
      count: computed(() => store.count),
      increment: () => store.increment(),
      decrement: () => store.decrement(),
    };