vue3用pinia写一个加减水的视图

首先，我们需要安装和导入 Pinia：

npm install pinia

import { createPinia } from 'pinia'

const pinia = createPinia()

然后，我们可以创建一个 store，用来存储当前水的数量：

export const useWaterStore = pinia.defineStore('water', {
  state: () => ({
    amount: 0,
  }),
  actions: {
    increment() {
      this.amount += 1
    },
    decrement() {
      if (this.amount > 0) {
        this.amount -= 1
      }
    },
  },
})

接下来，我们可以在组件中使用这个 store，来展示当前水的数量和操作加减水的按钮：

<template>
  <div>
    <p>当前水的数量：{{ amount }}</p>
    <button @click="increment">加水</button>
    <button @click="decrement">减水</button>
  </div>
</template>

<script>
import { useWaterStore } from '@/stores/water'

export default {
  setup() {
    const waterStore = useWaterStore()

    const amount = computed(() => waterStore.amount)
    const increment = () => waterStore.increment()
    const decrement = () => waterStore.decrement()

    return {
      amount,
      increment,
      decrement,
    }
  },
}
</script>

现在，我们就完成了一个简单的加减水的视图。当用户点击加水按钮时，会触发 `increment` 方法，从而改变水的数量；当用户点击减水按钮时，会触发 `decrement` 方法，从而减少水的数量。同时，视图会根据当前水的数量进行实时更新。