vue3 pinia使用

// store/counter.js
import { defineStore } from 'pinia';

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

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);

app.use(createPinia());

app.mount('#app');

// App.vue
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

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

export default {
  setup() {
    const counter = useCounterStore();
    return { counter };
  },
};
</script>

解释说明

1. 创建 Pinia Store:

   • store/counter.js 文件中使用 defineStore 定义了一个名为 counter 的 store。
   • state 函数返回一个对象，包含初始状态 count: 0。
   • actions 对象包含两个方法 increment 和 decrement，用于修改状态。

2. 初始化 Vue 应用并集成 Pinia:

   • 在 main.js 中，通过 createPinia 创建一个新的 Pinia 实例，并通过 app.use(createPinia()) 将其安装到 Vue 应用中。

3. 在组件中使用 Store:

   • 在 App.vue 中，通过 useCounterStore 钩子函数获取 counter store 实例。
   • 使用 setup 函数将 counter 返回给模板，以便在模板中使用。

4. 模板中的使用:

   • 模板中展示了当前的计数器值，并提供了两个按钮来增加或减少计数器的值。