H5W3
当前位置:H5W3 > 其他技术问题 > 正文

请教一下vuex的mapState和mapGetters 有哪些区别, 两者使用的场景都有哪些

请教一下vuex的mapState和mapGetters 有哪些区别, 两者使用的场景都有哪些

回答:

官网上有介绍

mapState 辅助函数

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:

// 在单独构建的版本中辅助函数为 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
    }
  })
}

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

import { mapGetters } from 'vuex'

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

本文地址:H5W3 » 请教一下vuex的mapState和mapGetters 有哪些区别, 两者使用的场景都有哪些

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址