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

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

记一次vuex的mapGetters无效原因及解决的更多相关文章

  1. 一文详解Pinia和Vuex与两个Vue状态管理模式

    这篇文章主要介绍了一文详解Pinia和Vuex与两个Vue状态管理模式,Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia

  2. uniapp中vuex的应用使用步骤

    Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于uniapp中vuex的应用使用,需要的朋友可以参考下

  3. 详解react阻止无效重渲染的多种方式

    这篇文章主要介绍了详解react阻止无效重渲染的多种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. vue3中router路由以及vuex的store使用解析

    这篇文章主要介绍了vue3中router路由以及vuex的store使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  5. vue修改数据页面无效的解决方案

    这篇文章主要介绍了vue修改数据页面无效的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  6. vuex中store存储store.commit和store.dispatch的区别及说明

    这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  7. vuex中的state属性解析

    这篇文章主要介绍了vuex中的state属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  8. vue项目keepAlive配合vuex动态设置路由缓存方式

    vue项目keepAlive配合vuex动态设置路由缓存方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  9. 关于vuex状态刷新网页时数据被清空问题及解决

    这篇文章主要介绍了关于vuex状态刷新网页时数据被清空问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  10. jQuery 更改checkbox的状态,无效的解决方法

    下面小编就为大家带来一篇jQuery 更改checkbox的状态,无效的解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部