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

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

您可能感兴趣的文章:

在vue项目中引入scss并使用scss样式详解
SCSS是一种CSS预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,这篇文章主要给大家介绍了关于在vue项目中引入scss并使用scss样式的相关资料,需要的朋友可以参考下
2022-07-07
element-ui中表格设置正确的排序及设置默认排序
表格中有时候会有排序的需求,下面这篇文章主要给大家介绍了关于element-ui中表格设置正确的排序及设置默认排序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
在vue中如何引入外部的css文件
这篇文章主要介绍了在vue中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue-router history模式服务器端配置过程记录
vue路由有hash和history两种模式,这篇文章主要给大家介绍了关于vue-router history模式服务器端配置的相关资料,需要的朋友可以参考下
2021-06-06
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
今天小编就为大家分享一篇vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue3如何在SCSS中使用v-bind
这篇文章主要介绍了Vue3如何在SCSS中使用v-bind,通过template先创建一个通用的页面结构,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03
vue中的@click.native 原生点击事件
这篇文章主要介绍了vue中的@click.native 原生点击事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
基于vue2.0实现简单轮播图
这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下
2024-01-01
VScode格式化ESlint方法(最全最好用方法)
这篇文章主要介绍了VScode格式化ESlint方法(最全最好用方法),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09