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封装tabs组件案例详解

    vue封装tabs组件案例详解

    这篇文章主要为大家详细介绍了vue封装tabs组件案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue 报错Error: No PostCSS Config found问题及解决

    Vue 报错Error: No PostCSS Config foun

    这篇文章主要介绍了Vue 报错Error: No PostCSS Config found问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue.js中vue-property-decorator的使用方法详解

    Vue.js中vue-property-decorator的使用方法详解

    vue-property-decorator是一个用于在Vue.js中使用TypeScript装饰器的库,它能够简化 Vue 组件的定义,使代码更加简洁和可维护,它能够简化Vue组件的定义,使代码更加简洁和可维护,本文将深入探讨vue-property-decorator的使用方法,并展示如何在Vue.js项目中应用它
    2024-08-08
  • Vue中常见的几种传参方式小结

    Vue中常见的几种传参方式小结

    Vue组件的使用不管是在平常工作还是在面试面试中,都是频繁出现的,下面这篇文章主要给大家介绍了关于Vue中常见的几种传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue.js移动端app之上拉加载以及下拉刷新实战

    vue.js移动端app之上拉加载以及下拉刷新实战

    这篇文章主要介绍了vue.js移动端app之上拉加载以及下拉刷新实战,非常具有实用价值,需要的朋友可以参考下
    2017-09-09
  • vue实现点击展开点击收起效果

    vue实现点击展开点击收起效果

    这篇文章主要介绍了vue实现点击展开,点击收起效果,首先我们需要定义data里面的数据,使用computed对data进行处理,需要的朋友可以参考下
    2018-04-04
  • vue+F2生成折线图的方法

    vue+F2生成折线图的方法

    这篇文章主要为大家详细介绍了vue+F2生成折线图的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 关于Element-UI Table 表格指定列添加点击事件

    关于Element-UI Table 表格指定列添加点击事件

    这篇文章主要介绍了关于Element-UI Table 表格指定列添加点击事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue中如何简单封装axios浅析

    vue中如何简单封装axios浅析

    Axios 毋庸多说大家在前端开发中常用的一个发送 HTTP 请求的库,用过的都知道,篇文章主要给大家介绍了关于vue中如何简单封装axios的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue实现简单表格组件实例详解

    vue实现简单表格组件实例详解

    vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变。下面我会以一个简单的案例来说
    2017-04-04

最新评论