Vue全家桶 Pinia状态管理

// 在Pinia中创建一个新的存储
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter', // 唯一id，用于在应用中识别此存储
  state: () => ({
    count: 0, // 响应式状态
  }),
  actions: {
    increment() {
      this.count++; // 更改状态的方法
    },
  },
});
 
// 在Vue组件中使用Pinia存储
<template>
  <div>{{ counterStore.count }}</div>
  <button @click="counterStore.increment">增加</button>
</template>
 
<script setup>
import { useCounterStore } from './path/to/your/store'
 
const counterStore = useCounterStore();
</script>

这个例子展示了如何在Vue应用中使用Pinia来创建和管理状态。首先定义了一个名为counterStore的存储，包含一个状态count和一个操作increment。然后在Vue组件中通过setup函数使用这个存储，并展示了如何在模板中绑定存储的状态和在按钮点击事件中触发存储的行为。