vuex的辅助函数该如何使用

 更新时间:2021年06月19日 08:41:02   作者:白房子  
vue通过辅助函数mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实例中就能访问vuex.store中的属性了,对于操作vuex.store就很方便了,本文具体的介绍下这些辅助函数的使用方法

mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed:{
     ...mapState({
         // 箭头函数可使代码更简练
         count: state => state.count,
         // 传字符串参数 'count' 等同于 `state => state.count`
         countAlias: 'count',

         // 为了能够使用 `this` 获取局部状态,必须使用常规函数
         countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}

定义的属性名与state中的名称相同时,可以传入一个数组

//定义state
const state={
    count:1,
}

//在组件中使用辅助函数
computed:{
    ...mapState(['count'])
}

mapGetters

computed:{
    ...mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
}

当属性名与getters中定义的相同时,可以传入一个数组

computed:{
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

总结:

  • mapState与mapGetters都用computed来进行映射
  • 在组件中映射完成后,通过this.映射属性名进行使用

mapMutations

methods:{
    ...mapMutations({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
}

当属性名与mapMutatios中定义的相同时,可以传入一个数组

methods:{
    ...mapMutations([
        'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

        // `mapMutations` 也支持载荷:
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
}

mapActios

mathods:{
    ...mapActions({
        add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
}

当属性名与mapActios中定义的相同时,可以传入一个数组

methods:{
    ...mapActions([
        'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`	
        // `mapActions` 也支持载荷:
        'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
}

总结

  • mapMutations与mapActios都在methods中进行映射
  • 映射之后变成一个方法

多个modules

在不使用辅助函数的时候,

this.$store.commit('app/addCount')

使用辅助函数,辅助函数的第一个参数给定命名空间的路径

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

或者使用 createNamespacedHelpers函数来创建一个基于命名空间的辅助函数

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') //给定路径
//使用方法与之前相同
export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

以上就是vuex的辅助函数该如何使用的详细内容,更多关于vuex的辅助函数的资料请关注脚本之家其它相关文章!

相关文章

  • Vue中直接操作数组索引不奏效的问题解读

    Vue中直接操作数组索引不奏效的问题解读

    这篇文章主要介绍了Vue中直接操作数组索引不奏效的问题解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue生命周期函数调用详解

    Vue生命周期函数调用详解

    这篇文章主要介绍了Vue生命周期函数调用详解,本文将实现Vue生命周期相关代码的核心逻辑,从源码层面来理解生命周期,感兴趣的小伙伴可以参考一下
    2022-08-08
  • Vue数据双向绑定原理及简单实现方法

    Vue数据双向绑定原理及简单实现方法

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-05-05
  • 解决$store.getters调用不执行的问题

    解决$store.getters调用不执行的问题

    今天小编就为大家分享一篇解决$store.getters调用不执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解

    Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解

    最近在研究vue项目中使用node.js搭建server服务器,链接本地mysql数据库,进行数据操作,下面这篇文章主要给大家介绍了关于Vue项目通过node连接MySQL数据库并实现增删改查操作的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令)

    vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令)

    这篇文章主要介绍了vue-cli安装全过程(附带cnpm安装不成功及vue不是内部命令),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue组件之间的数据共享详解

    Vue组件之间的数据共享详解

    这篇文章主要为大家介绍了Vue组件之间的数据共享,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue3中关于ref和reactive的问题

    Vue3中关于ref和reactive的问题

    这篇文章主要介绍了Vue3中关于ref和reactive的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue利用computed解决单项数据流的问题

    Vue利用computed解决单项数据流的问题

    Vue是一个非常流行和强大的前端框架,它让我们可以用简洁和优雅的方式来构建用户界面,但是,Vue也有一些需要注意和掌握的细节和技巧,今天我们来分享一个Vue中非常经典的问题,也是一个非常实用的技巧,Vue利用computed解决单项数据流,需要的朋友可以参考下
    2023-08-08
  • vue修改数据的时候,表单值回显不正确问题及解决

    vue修改数据的时候,表单值回显不正确问题及解决

    这篇文章主要介绍了vue修改数据的时候,表单值回显不正确的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11

最新评论