欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

記一次vuex的mapGetters無效原因及解決

 更新時間：2022年08月31日 14:24:08   作者：濤鍋  
這篇文章主要介紹了vuex的mapGetters無效原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vuex的mapGetters無效原因

報錯是（error during evaluation)，見下圖。

代碼大概是下面這樣，

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

然后就是在vue-devtools面板里看到這樣的報錯

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

后來下斷點看報錯，發(fā)現(xiàn)了問題。

this.$store是undefined。

因為在new Vue的時候，沒有將store注入進(jìn)來，導(dǎo)致vuex里的代碼this.$store獲取不到。

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

vuex mapGetters語法報錯(Unexpected token)

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

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

但是在借助babel編譯轉(zhuǎn)換時發(fā)生了報錯： 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中搜索這樣的報錯，原來是我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. 安裝整個stage2的預(yù)置器  npm i -D  babel-preset-stage-2

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

安裝、配置都完成以后 ，重啟webpack，就不會再有報錯了。

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

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

相關(guān)文章

  • Nuxt.js實戰(zhàn)詳解

    Nuxt.js實戰(zhàn)詳解

    這篇文章主要介紹了Nuxt.js實戰(zhàn)詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • vue對象的深度克隆方式

    vue對象的深度克隆方式

    這篇文章主要介紹了vue對象的深度克隆方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • vue實現(xiàn)左右滑動效果實例代碼

    vue實現(xiàn)左右滑動效果實例代碼

    左右滾動的效果,在日常開發(fā)中比較常見，這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)左右滑動效果的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • vue filter的四種用法小結(jié)

    vue filter的四種用法小結(jié)

    這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue使用Google Recaptcha驗證的實現(xiàn)示例

    vue使用Google Recaptcha驗證的實現(xiàn)示例

    我們最近的項目中需要使用谷歌機(jī)器人驗證，所以就動手實現(xiàn)一下，本文就來詳細(xì)的介紹一下vue Google Recaptcha驗證，感興趣的可以了解一下
    2021-08-08
  • 使用vue官方提供的模板vue-cli搭建一個helloWorld案例分析

    使用vue官方提供的模板vue-cli搭建一個helloWorld案例分析

    這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個helloWorld案例,需要的朋友可以參考下
    2018-01-01
  • 詳解vue中使用protobuf踩坑記

    詳解vue中使用protobuf踩坑記

    這篇文章主要介紹了vue中使用protobuf踩坑記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue自定義指令的使用詳細(xì)介紹

    Vue自定義指令的使用詳細(xì)介紹

    我們看到的v-開頭的行內(nèi)屬性，都是指令，不同的指令可以完成或?qū)崿F(xiàn)不同的功能，對普通 DOM元素進(jìn)行底層操作，這時候就會用到自定義指令。除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令
    2022-09-09
  • fetch網(wǎng)絡(luò)請求封裝示例詳解

    fetch網(wǎng)絡(luò)請求封裝示例詳解

    這篇文章主要介紹了fetch網(wǎng)絡(luò)請求封裝的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2021-11-11
  • Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題

    Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題

    這篇文章主要介紹了Vue(定時器)解決mounted不能獲取到data中的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07

最新評論