Web前端 ---- 【Vue】Vuex的使用(辅助函数、模块化开发)

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
 
<script>
import { mapState, mapActions } from 'vuex';
 
export default {
  computed: {
    // 使用对象展开运算符将此数组中的函数映射到局部计算属性
    ...mapState({
      count: state => state.count // 映射 this.count 为 store.state.count
    })
  },
  methods: {
    // 映射 `this.increment()` 和 `this.decrement()` 到 `this.$store.commit` mutations
    ...mapActions([
      'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
      'decrement'  // 映射 this.decrement() 为 this.$store.dispatch('decrement')
    ])
  }
};
</script>

这个简单的Vue组件使用了Vuex的辅助函数mapState和mapActions来简化访问和提交状态的过程。它展示了如何将store中的状态映射到组件的计算属性，以及如何将store中的actions映射到组件的方法，使得可以直接在组件中调用这些函数来进行状态更新。