Vue2中的mapState和mapGetters和mapActions和mapMutations

在如下链接,说明了getters和基础的应用

Vue2中使用Vuex_Aricanv的博客-CSDN博客在App.js中,通过 $store.commit() 将方法回调名,以及数据,直接传给mutations对象,在mutations对象中写方法回调,将数据进行处理使用。由于已经引入Vuex,所以在this中会有$store方法, store方法中存在 commit,dispatch,getters,state等属性具体属性见下图。并且在其中进行逻辑运算,然后再通过 context.commit('大写方法名区别actions中的方法',value)方法名(context,value){https://blog.csdn.net/weixin_44685106/article/details/130450769?spm=1001.2014.3001.5501

这一节说明 使用mapState 和 mapGetters 和 mapActions 和 mapMutations 

 在App.vue中

<template>
  <div class="title">
    <h2>当前求和为: {{ sum }}</h2>
    <h2>当前通过复杂运算求和: {{ bigSum }}</h2>
	<br>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
	</select>
    <button @click="jia(n)">+</button>
    <button @click="jian(n)">-</button>
  </div>
</template>

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

export default {
  name: 'App',
  data() {
    return {
      n: 1 //用户选择数字
    }
  },
  computed:{
    //sum(){
	// 	return this.$store.state.sum
	// },
	...mapState(['sum'])
    // bigSum(){
	// 	return this.$store.getters.bigSum
	// },
	...mapGetters(['bigSum'])
  }
  },
  methods: {
    // jia() {
    //   this.$store.commit('JIA', this.n) // 简单逻辑 通过commit 直接将行为 递给 mutations对象
    // },
    // jian() {
    //   this.$store.commit('JIAN', this.n)
    // },

    //通过mapMutations中的方法,会调用commit去联系Mutations

    ...mapMutations({jia:'JIA',jian:'JIAN'}),
    // ji() {
    //   this.$store.dispatch('ji', this.n) // 复杂逻辑  先递交给 actions 通过它 递给mutations对象
    // },
    // slide() {
    //   this.$store.dispatch('slide', this.n)
    // }

    //通过mapMutations中的方法,会调用dispatch去联系Actions
    ...mapActions({ji:'ji',slide:'slide'})
  }
}
</script>

在对象中写法：...mapxxx可以展开对象中的每一项

完整写法在注释中，通过Vuex调用里面的方法进行代码重复调用

注意：用mapMutations和mapActions需要在模板中调用函数时传递参数

以上内容仅供学习使用