vue pinia

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

export const useCounterStore = defineStore('counter', {
  // state: 状态，存储数据
  state: () => ({
    count: 0,
  }),
  // getters: 类似于 Vue 的计算属性，用于派生状态
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  // actions: 用于定义改变状态的方法
  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>
import { useCounterStore } from './store/counter';

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

解释说明

1. 创建 Store:

   • 使用 defineStore 函数创建一个名为 counter 的 store。
   • state 定义了 store 的初始状态。
   • getters 用于派生状态，类似于 Vue 的计算属性。
   • actions 用于定义改变状态的方法。

2. 注册 Pinia:

   • 在 main.js 中创建并注册 Pinia 实例，使其可以在整个应用中使用。

3. 在组件中使用 Store:

   • 使用 useCounterStore 钩子函数获取 store 实例，并在模板中使用其状态和方法。