您的位置:首页 > 编程学习 > > 正文

vuex怎么使用数据(vuex的辅助函数该如何使用)

更多 时间:2021-10-25 10:04:42 类别:编程学习 浏览量:1794

vuex怎么使用数据

vuex的辅助函数该如何使用

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的辅助函数的资料请关注开心学习网其它相关文章!

    标签:vuex 辅助函数