vuex多组件state加水放水代码

以下是一个简单的示例，演示如何在多个组件中使用 Vuex 的状态管理。

在 store.js 文件中，定义一个名为 state 的对象来存储应用程序的所有状态：

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    waterLevel: 50
  },
  mutations: {
    changeWaterLevel(state, amount) {
      state.waterLevel += amount
    }
  },
  actions: {
    addWater({ commit }) {
      commit('changeWaterLevel', 10)
    },
    removeWater({ commit }) {
      commit('changeWaterLevel', -10)
    }
  }
})

在组件中，使用 mapState 辅助函数将 state 映射到组件的计算属性中，并使用 mapActions 辅助函数将 actions 映射到组件的方法中：

// WaterLevel.vue

<template>
  <div>
    <h2>Water Level: {{ waterLevel }}</h2>
    <button @click="addWater">Add Water</button>
    <button @click="removeWater">Remove Water</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['waterLevel'])
  },
  methods: {
    ...mapActions(['addWater', 'removeWater'])
  }
}
</script>

另一个组件可以更新和访问同一个状态：

// WaterPump.vue

<template>
  <div>
    <h2>Water Pump</h2>
    <button @click="pumpWater">Pump Water</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['addWater']),
    pumpWater() {
      this.addWater()
    }
  }
}
</script>