Vuex 获取getter对象中的值的所有方法(包括module中的getter)

getter取值与state取值具有相似性

1.直接从根实例获取
// main.js中,把store注册在根实例下,可使用this.$stroe.getters直接取值
computed: {
  testNum1() {
    return this.$store.getters.testNum1;
  }
}
2.使用mapState取值
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      // 把 `this.getNum1` 映射为 `this.$store.getters.getNum1`
      getNum1: "getNum1"
    }),
    ...mapGetters([
      // 使用对象展开运算符将 getter 混入 computed 对象
      "getNum4"
    ])
  }
};
3.使用module中的getter

module中的getter,又分为namespaced(命名空间)truefalse的情况。默认为false,则表示方位都是全局注册,与上边两种方法一致。当为true时,则使用如下方法:

import { mapGetters } from "vuex";

export default {
  computed: {
    getNum1(a,b) {
      return this.$store.getters['moduleA/getNum1']
    },
    // 第一个参数是namespace命名空间,填上对应的module名称即可
    ...mapGetters("moduleA", {
      getNum2: "getNum2"
    }),
    ...mapGetters("moduleA", ["getNum3"])
  }
};

你可能感兴趣的:(Vue.js笔记,javascript,vue)