vue3 pinia

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

export const useCounterStore = defineStore('counter', {
  // 状态
  state: () => ({
    count: 0,
  }),
  // 计算属性
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // 操作
  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);

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

app.mount('#app');

// 在组件中使用
<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 setup>
import { useCounterStore } from './store/counter';
const counter = useCounterStore();
</script>

解释说明

1. 定义 Store:

   • 使用 defineStore 创建一个名为 counter 的 store。
   • state 定义了状态，这里是 count。
   • getters 定义了计算属性，这里是 doubleCount，它返回 count 的两倍。
   • actions 定义了操作方法，这里是 increment 和 decrement，用于增加和减少 count。

2. 注册 Pinia:

   • 在 main.js 中，创建 Vue 应用并注册 Pinia。
   • 使用 app.use(createPinia()) 将 Pinia 注册到应用中。

3. 在组件中使用 Store:

   • 使用 <script setup> 语法导入并使用 useCounterStore。
   • 在模板中通过 counter.count 和 counter.doubleCount 访问状态和计算属性。
   • 通过 @click 绑定按钮事件调用 counter.increment 和 counter.decrement 方法。