Vuex - mapState辅助函数 和 mapMutations辅助函数

mapState辅助函数 和 mapMutations辅助函数

一、mapState 辅助函数

---

mapState函数可以将 store 中的状态映射到组件的计算属性中。这样，我们就可以在组件中直接访问这些状态，而不必每次都通过this.$store.state来获取。

使用方式：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['state1', 'state2']),
    // 或者使用对象语法，允许重命名
    ...mapState({
      alias1: 'state1',
      alias2: 'state2'
    })
  },
  // 组件其他代码...
}

上述代码中，state1和state2是 store 中的两个状态，使用mapState后，会在组件的计算属性中生成与状态同名的属性。如果需要给生成的属性起别名，可以使用对象语法

二、mapMutations 辅助函数

---

mapMutations函数可以将 store 中的变更方法映射到组件的方法中。这样，我们就可以在组件中直接调用这些方法，而不必每次都通过this.$store.commit来触发。

使用方式：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['mutation1', 'mutation2']),
    // 或者使用对象语法，允许重命名
    ...mapMutations({
      alias1: 'mutation1',
      alias2: 'mutation2'
    })
  },
  // 组件其他代码...
}

上述代码中，mutation1和mutation2是 store 中的两个变更方法，使用mapMutations后，会在组件的方法中生成与方法同名的函数。如果需要给生成的函数起别名，可以使用对象语法。

---

使用 mapState 和 mapMutations 辅助函数后，我们可以更方便地在组件中访问 Vuex 的状态和触发变更操作。