記一次vuex的mapGetters無(wú)效原因及解決
vuex的mapGetters無(wú)效原因
報(bào)錯(cuò)是（error during evaluation)，見(jiàn)下圖。
代碼大概是下面這樣，
import store from './store.js'
computed: {
...mapGetters('project', [
'isOpenSupplyNeed',
]),
a(){
return store.getters['project/isOpenSupplyNeed']
}
},然后就是在vue-devtools面板里看到這樣的報(bào)錯(cuò)
然而另一個(gè)屬性a，是有正確的值的。
后來(lái)下斷點(diǎn)看報(bào)錯(cuò)，發(fā)現(xiàn)了問(wèn)題。
this.$store是undefined。
因?yàn)樵趎ew Vue的時(shí)候，沒(méi)有將store注入進(jìn)來(lái)，導(dǎo)致vuex里的代碼this.$store獲取不到。
結(jié)論就是如果用到這些輔助函數(shù)，一定要保證new Vue的時(shí)候注入store。
vuex mapGetters語(yǔ)法報(bào)錯(cuò)(Unexpected token)
在使用vuex2的mapGetters 和 mapActions 的方法時(shí)，借助 stage2 的 Object Rest Operator 特性,可以寫(xiě)出下面代碼：
computed: {
? ? ...mapGetters([ ?// … 三個(gè)點(diǎn)，在框架語(yǔ)言里，就是傳對(duì)象
? ? ? ? 'hadChannels',
? ? ? ? 'currentChannel'
? ? ])
}但是在借助babel編譯轉(zhuǎn)換時(shí)發(fā)生了報(bào)錯(cuò)： BabelLoaderError: SyntaxError: Unexpected token 。
搜索一番，結(jié)果是babel 沒(méi)有解析成功，看來(lái)是 babel的配置為問(wèn)題
原來(lái)的 .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ò)，原來(lái)是我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 的支持解決了問(wèn)題，不過(guò)跟我這種不一樣先記下來(lái)。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- Vue3使用Vuex之mapState與mapGetters詳解
- vuex中...mapstate和...mapgetters的區(qū)別及說(shuō)明
- vue3.0使用mapState,mapGetters和mapActions的方式
- vuex 中輔助函數(shù)mapGetters的基本用法詳解
- vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
- vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
- 詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
- Vue Getters和mapGetters的原理及使用示例詳解
相關(guān)文章
這篇文章主要介紹了Nuxt.js實(shí)戰(zhàn)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue對(duì)象的深度克隆方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue實(shí)現(xiàn)左右滑動(dòng)效果實(shí)例代碼
左右滾動(dòng)的效果,在日常開(kāi)發(fā)中比較常見(jiàn)，這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)左右滑動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue使用Google Recaptcha驗(yàn)證的實(shí)現(xiàn)示例
我們最近的項(xiàng)目中需要使用谷歌機(jī)器人驗(yàn)證，所以就動(dòng)手實(shí)現(xiàn)一下，本文就來(lái)詳細(xì)的介紹一下vue Google Recaptcha驗(yàn)證，感興趣的可以了解一下2021-08-08
使用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例分析
這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue中使用protobuf踩坑記，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
我們看到的v-開(kāi)頭的行內(nèi)屬性，都是指令，不同的指令可以完成或?qū)崿F(xiàn)不同的功能，對(duì)普通 DOM元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令2022-09-09
fetch網(wǎng)絡(luò)請(qǐng)求封裝示例詳解
這篇文章主要介紹了fetch網(wǎng)絡(luò)請(qǐng)求封裝的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-11-11
Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問(wèn)題
這篇文章主要介紹了Vue(定時(shí)器)解決mounted不能獲取到data中的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07