vuex map的使用遇到的坑

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：
本文字数： 616 | 阅读时长 ≈ 1 分钟

vuex的map有如下写法

1
2
3
4
5
6
7
8
9
10
11
12
13
import { mapGetters } from 'vuex'

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

其中的使用扩展符...来进行对象展开运算，标准的ES6只对数组有效，故一直报错...

查明原因原来是Babel的不同等级支持度不一样，需要设置不同的stage

解决方案

1
2
# 安装babel-preset-stage-2
$ npm i babel-preset-stage-2 -D
1
2
3
4
5
6
7
// 设置.babelrc，新增了stage-2
{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-2"
  ]
}

再次启动程序npm run dev，不报错了

汗！真是折腾，官网vuex没有告知这一点

参考： 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3（一）

0%