vuex2中使用mapMutations/mapActions报错解决方法 BabelLoaderError: SyntaxError: Unexpected token

Posted 地铁程序员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex2中使用mapMutations/mapActions报错解决方法 BabelLoaderError: SyntaxError: Unexpected token相关的知识,希望对你有一定的参考价值。

在尝鲜vuex2时,发现vuex2增加了 mapGetters 和 mapActions 的方法,借助stage2的 Object Rest Operator 特性,可以写出下面代码:
methods: {
marked,
...mapActions([
‘getArticles‘
])
}
但是在借助babel编译转换时发生了报错: BabelLoaderError: SyntaxError: Unexpected token 。
解决方案
在vuex的repo issues中有人提过这样的问题,后来是修改了eslint配置中对 Object Rest Operator 的支持解决了问题,然而我根本没有使用eslint。
接着在babel的issues中搜索这样的报错,原来是我babel预置的转换器是 babel-preset-es2015 ,并不能转换 Object Rest Operator 特性。
解决方法很简单了,可以安装整个stage2的预置器或者安装 Object Rest Operator 的babel插件 babel-plugin-transform-object-rest-spread 。
我选择了安装插件,接着在babel的配置文件 .babelrc 中应用插件:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": ["transform-object-rest-spread"]
}
或者
$ npm install babel-preset-stage-2

{
"presets": [
["es2015", { "modules": false }],"stage-2"

]
}


重启webpack,就不会再有报错了。


作者:W_I_S_E
链接:http://www.jianshu.com/p/0a71772dcd08

以上是关于vuex2中使用mapMutations/mapActions报错解决方法 BabelLoaderError: SyntaxError: Unexpected token的主要内容,如果未能解决你的问题,请参考以下文章

vuex2.0 基本使用 --- getter

(转)vuex2.0 基本使用 --- getter

vuex2中使用mapGetters/mapActions报错解决方法

vuex2.0 基本使用 --- mutation 和 action

16vuex2.0 之 getter

vuex2.0 之 modules