vue 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 类似于 Vue 的计算属性，用于派生状态，例如 doubleCount。
   • actions 是修改状态的方法，例如 increment 和 decrement。

2. 注册 Pinia:

   • 在 main.js 中，创建 Vue 应用实例并使用 createPinia() 注册 Pinia。

3. 在组件中使用 Store:

   • 使用 <script setup> 语法导入并使用 useCounterStore。
   • 在模板中通过 counter 访问 store 中的状态和方法。

这样就可以在 Vue 组件中方便地管理和共享状态。