记一次vuex的mapGetters无效原因及解决
vuex的mapGetters无效原因
vuex mapGetters语法报错(Unexpected token)
解决方案
vuex的mapGetters无效原因报错是（error during evaluation)，见下图。
代码大概是下面这样，
import store from './store.js'
computed: {
...mapGetters('project', [
'isOpenSupplyNeed',
]),
a(){
return store.getters['project/isOpenSupplyNeed']
}
},
然后就是在vue-devtools面板里看到这样的报错
然而另一个属性a，是有正确的值的。
后来下断点看报错，发现了问题。
this.$store是undefined。
因为在new Vue的时候，没有将store注入进来，导致vuex里的代码this.$store获取不到。
结论就是如果用到这些辅助函数，一定要保证new Vue的时候注入store。
vuex mapGetters语法报错(Unexpected token)在使用vuex2的mapGetters 和 mapActions 的方法时，借助 stage2 的 Object Rest Operator 特性,可以写出下面代码：
computed: {
...mapGetters([ // … 三个点，在框架语言里，就是传对象
'hadChannels',
'currentChannel'
])
}
但是在借助babel编译转换时发生了报错： BabelLoaderError: SyntaxError: Unexpected token 。
搜索一番，结果是babel 没有解析成功，看来是 babel的配置为问题
原来的 .babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
解决方案
接着在babel的issues中搜索这样的报错，原来是我babel预置的转换器是 babel-preset-es2015 ，并不能转换 Object Rest Operator 特性。
1.安装 Object Rest Operator 的babel插件 npm i -D babel-plugin-transform-object-rest-spread 。
babel: {
presets: ["es2015"],
plugins: [
"transform-runtime",
"transform-object-rest-spread"]
}
2. 安装整个stage2的预置器 npm i -D babel-preset-stage-2
babel: {
presets: ["stage-2"],
plugins: [
"transform-runtime"
]
}
安装、配置都完成以后 ，重启webpack，就不会再有报错了。
后记：还有人修改了eslint配置中对 Object Rest Operator 的支持解决了问题，不过跟我这种不一样先记下来。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
