美文网首页h5前端开发vue开发技术程序员
vuex--辅助函数mapState,mapGetters, m

vuex--辅助函数mapState,mapGetters, m

作者: 手指乐 | 来源:发表于2019-10-14 17:45 被阅读0次
  • 以mapActions为例,通常,我们在vuex的actions中定义一个方法:
export default {
    vuexSetUserLogin({commit}){
        commit("vuex_set_user_login");
    },
    vuexSetTest({commit}, val){
        commit("vuex_set_test", val);
    }
}

调用时这样调用:

this.$store.dispatch("vuexSetTest", "ttttttt");
  • mapActions的作用就是,把actions中的方法映射到methods中,换一种调用方式。
    引入mapAction:
import {mapActions,} from 'vuex'

映射方法:

"methods": {
    ...mapActions([
        "vuexSetUserLogin",
        "vuexSetTest"
    ]),
},

把actions里面的两个方法映射到本地的同名方法
调用的时候就像调用本组件的method一样:

this.vuexSetTest("eeee");
  • mapActions() 返回的是一个对象, 用了 ... 扩展符后,才可以放进一个对象里,和其他组件内定义的 method 在同一个 methods 对象。
{
    methods: mapActions() // 如果没有其它组件内的定义的方法,可以这样写
}
{
    methods: {
        ...mapActions(),// 如果有其他定义的方法
        otherMethod1 () {},
        otherMethod2 () {}
    }
}
  • mapGetters:
computed:mapGetters([
 'count'
 ]),
  • 映射的时候可以取别名:
export default {
  // ...
  methods: {
       //下述中的 ... 是拓展运算符
       // 使用 [] 是解构赋值
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
 
      // `mapActions` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }

相关文章

网友评论

    本文标题:vuex--辅助函数mapState,mapGetters, m

    本文链接:https://www.haomeiwen.com/subject/alzrmctx.html