vue.js 创作我的创作，记录不懂的东西(mapGetters $$ webpack @)

import { mapGetters } from 'vuex'
辅助函数仅仅是将store中的getters映射到局部计算属性中，用法和mapState类似

import { mapGetters } from 'vuex'
computed: {
   // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
    'doneTodosCount',
    'anotherGetter',])}
 //给getter属性换名字
  mapGetters({
 // 映射 this.doneCount 为 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})

mapGetters 源码示例

var mapGetters = normalizeNamespace(function (namespace, getters) {
  var res = {};
  normalizeMap(getters).forEach(function (ref) {
    var key = ref.key;
    var val = ref.val;

    val = namespace + val;
    res[key] = function mappedGetter () {
      if (namespace && !getModuleByNamespace(this.$store, 'mapGetters', namespace)) {
        return
      }
      if ("development" !== 'production' && !(val in this.$store.getters)) {
        console.error(("[vuex] unknown getter: " + val));
        return
      }
      return this.$store.getters[val]
    };
    // mark vuex getter for devtools
    res[key].vuex = true;
  });
  return res
});

computed 和 methods 比较：
官方文档的说法：
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

import 中@的作用
例如:import Myarea from '@/components/Area'
上述的@ 等同于 'src/components/Area'