记一次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，是有正确的值的。

后来下断点看报错，发现了问题。

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 的支持解决了问题，不过跟我这种不一样先记下来。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

uniapp Vue3中如何解决web/H5网页浏览器跨域的问题
存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求,同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦,这篇文章主要介绍了在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题,需要的朋友可以参考下
2024-06-06
利用Electron简单撸一个Markdown编辑器的方法
这篇文章主要介绍了利用Electron简单撸一个Markdown编辑器的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-06-06
vue中定义全局声明vscode插件提示找不到问题解决
这篇文章主要为大家介绍了vue中定义全局声明vscode插件提示找不到问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Nuxt.js之自动路由原理的实现方法
这篇文章主要介绍了Nuxt.js之自动路由原理的实现方法，nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值，需要的朋友可以参考下
2018-11-11
Vue.js实现图片切换功能
这篇文章主要为大家详细介绍了Vue.js实现图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
解决vue init webpack 下载依赖卡住不动的问题
这篇文章主要介绍了解决vue init webpack 下载依赖卡住不动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等）
这篇文章主要介绍了解决vue this.$forceUpdate() 处理页面刷新问题（v-for循环值刷新等），解决方法是使用this.$forceUpdate()强制刷新，文章给大家分享了代码案例，需要的朋友参考下吧
2018-07-07
vue实现目录树结构
这篇文章主要为大家详细介绍了vue实现目录树结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
手动实现vue2.0的双向数据绑定原理详解
这篇文章主要给大家介绍了关于手动实现vue2.0的双向数据绑定原理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
vue项目中canvas实现截图功能
这篇文章主要为大家详细介绍了vue项目中canvas实现截图功能，截取图片的一部分，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07