Vuex中4个map方法的使用

我要学前端！

已于 2023-04-04 17:52:40 修改

阅读量185

点赞数

文章标签： javascript vue.js vue 前端前端框架

于 2023-04-04 11:34:03 首次发布

本文链接：https://blog.csdn.net/min0320/article/details/129946840

版权

1.mapState方法

用于帮助我们映射state中的数据为计算属性

 computed: {
    //靠程序员自己去写计算属性
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },

    //借助mapState生成计算属性，从state中读取数据（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'})
    //借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState(["sum", "school", "subject"])
 }

2.mapGetters方法

用于帮助我们映射getters中的数据为计算属性

computed: {
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },

    //借助mapGetters生成计算属性，从getters中读取数据(对象写法)
    ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性，从getters中读取数据(数组写法)
    ...mapGetters(["bigSum"]),
  }

3.mapActions方法

用于帮助我们生成actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    // incrementOdd() {
    //   this.$store.dispatch("jiaOdd", this.n);
    // },
    // incrementWait() {
    //   this.$store.dispatch("jiaWait", this.n);
    // },

    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions(["jiaOdd", "jiaWait"]),
}

4.mapMutations方法

用于帮助我们生成与actions对话的方法，即：包含$store.commit(xxx)的函数

methods: {
    // increment() {
    //   this.$store.commit("JIA", this.n);
    // },
    // decrement() {
    //   this.$store.commit("JIAN", this.n);
    // },

    //上边的方法需要传入参数n
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    //数组方法需要把键值对名称都改为一样的，此处先不改，用对象写法即可。
    ...mapMutations([JIA:'JIA',JIAN:'JIAN'])
}

注意：mapActions与mapMutations使用时，若需要传递参数，需要：在模板中绑定事件时传递好参数，否则参数是事件对象。