vuex的mapGetters無效原因

報(bào)錯(cuò)是（error during evaluation)，見下圖。

代碼大概是下面這樣，

import store from './store.js'
computed: {
    ...mapGetters('project', [
        'isOpenSupplyNeed',
    ]),
    a(){
        return store.getters['project/isOpenSupplyNeed']
    }
},

然后就是在vue-devtools面板里看到這樣的報(bào)錯(cuò)

然而另一個(gè)屬性a，是有正確的值的。

后來下斷點(diǎn)看報(bào)錯(cuò)，發(fā)現(xiàn)了問題。

this.$store是undefined。

因?yàn)樵趎ew Vue的時(shí)候，沒有將store注入進(jìn)來，導(dǎo)致vuex里的代碼this.$store獲取不到。

結(jié)論就是如果用到這些輔助函數(shù)，一定要保證new Vue的時(shí)候注入store。

vuex mapGetters語法報(bào)錯(cuò)(Unexpected token)

在使用vuex2的mapGetters 和 mapActions 的方法時(shí)，借助 stage2 的 Object Rest Operator 特性,可以寫出下面代碼： 

computed: {
? ? ...mapGetters([ ?// … 三個(gè)點(diǎn)，在框架語言里，就是傳對(duì)象
? ? ? ? 'hadChannels',
? ? ? ? 'currentChannel'
? ? ])
}

但是在借助babel編譯轉(zhuǎn)換時(shí)發(fā)生了報(bào)錯(cuò)： BabelLoaderError: SyntaxError: Unexpected token 。 

搜索一番，結(jié)果是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中搜索這樣的報(bào)錯(cuò)，原來是我babel預(yù)置的轉(zhuǎn)換器是 babel-preset-es2015 ，并不能轉(zhuǎn)換 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. 安裝整個(gè)stage2的預(yù)置器  npm i -D  babel-preset-stage-2

babel: {
presets: ["stage-2"],
plugins: [
? ? "transform-runtime"
? ? ]
}

安裝、配置都完成以后 ，重啟webpack，就不會(huì)再有報(bào)錯(cuò)了。

后記：還有人修改了eslint配置中對(duì) Object Rest Operator 的支持解決了問題，不過跟我這種不一樣先記下來。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論