当前位置 : 主页 > 网络编程 > JavaScript >

记一次vuex的mapGetters无效原因及解决

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 vuex的mapGetters无效原因 vuex mapGetters语法报错(Unexpected token) 解决方案 vuex的mapGetters无效原因 报错是(error during evaluation),见下图。 代码大概是下面这样, import store from './store.js'c
目录
  • 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 的支持解决了问题,不过跟我这种不一样先记下来。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易盾网络。

网友评论