vue3使用pinia

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

export const useCounterStore = defineStore('counter', {
  // state: 状态管理，相当于 Vue 中的 data
  state: () => ({
    count: 0,
  }),
  // getters: 类似于 Vue 的 computed 计算属性
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // actions: 用于定义更改状态的方法，类似于 Vue 的 methods
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

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

const app = createApp(App);

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

app.mount('#app');

// src/components/Counter.vue
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

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

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

解释说明

1. 定义 Store:

   • defineStore 是 Pinia 提供的一个函数，用于创建一个新的 store。
   • state 定义了 store 的初始状态。
   • getters 用于定义计算属性，可以根据 state 返回派生的状态。
   • actions 用于定义更改状态的方法。

2. 注册 Pinia:

   • 在 main.js 中，使用 createPinia 创建一个 Pinia 实例，并通过 app.use 方法将其注册到 Vue 应用中。

3. 使用 Store:

   • 在组件中通过 useCounterStore 获取 store 实例，并在模板中使用其状态和方法。

4. 组件逻辑:

   • Counter.vue 组件展示了如何在模板中使用 store 的状态和方法，通过按钮点击事件触发 increment 和 decrement 方法来更改 count。