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

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

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

赞 (0)

相关推荐

  • Vuex中如何getters动态获取state的值

    Vuex中如何getters动态获取state的值

    目录 Vuex getters动态获取state的值 案例 说明 Vuex state值更改但是getters未更新 实现效果 Vuex getters动态获取state的值 在做项目时,getters里有很多冗余代码,但是仔细一看可以根据参数来解决,于是决定使用传参来进行获取,减少代码冗余. 案例 需求:在getters里能够根据值动态获取到people的元素.经过多次尝试,最终得到下面的代码. state.js代码如下: export default { people: [ { name:

  • vuex中...mapstate和...mapgetters的区别及说明

    目录 ...mapstate和...mapgetters的区别 …mapstate …mapGetters vuex mapState mapGetters用法及多个module下用法 一.mapState 二.mapGetters 三.mapActions.mapMutations ...mapstate和...mapgetters的区别 …mapstate 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮

  • VueX mapGetters获取Modules中的Getters方式

    VueX mapGetters获取Modules中的Getters方式

    目录 VueX mapGetters获取Modules的Getters mapGetters的使用及简单实现原理 项目中的mapGetters mapGetters简单实现原理 VueX mapGetters获取Modules的Getters 注明 : permission 是你要获取的Modules中的哪一个 (permission 即是 模块名);         ...mapGetters("permission",[             'ReturnRoutes'    

  • vuex中getters的基本用法解读

    目录 getters的基本用法解读 一.getter 定义 二.使用方法 三.mapGetters辅助函数 四.getters注意事项 getters的两种调用方法 方法一 方法二 getters的基本用法解读 一.getter 定义 Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作. 就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 二.使用方法 1.通

  • vuex通过getters访问数据为undefined问题及解决

    vuex通过getters访问数据为undefined问题及解决

    目录 getters访问数据为undefined问题 写一个类似例子 vuex getters(组件mounted调用)使用注意 逻辑 解决方案 getters访问数据为undefined问题 本篇文章可能对你的帮助不大, 只是个人开发中的一些记录.不同的业务和应用场景可能问题不同. 在通过 uni-app 开发商城时,用户快捷登录之后,服务器返回一个 token 数据,我将其同步到 vuex module下的 user 模块中. 然后从登录页返回到用户页,并发起 http 请求,获取用户的个人

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

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

    目录 vuex的mapGetters无效原因 vuex mapGetters语法报错(Unexpected token) 解决方案 vuex的mapGetters无效原因 报错是(error during evaluation),见下图. 代码大概是下面这样, import store from './store.js' computed: { ...mapGetters('project', [ 'isOpenSupplyNeed', ]), a(){ return store.getters

  • Spring+SpringMVC配置事务管理无效原因及解决办法详解

    一般我们在Spring的配置文件application.xml中对Service层代码配置事务管理,可以对Service的方法进行AOP增强或事务处理如事务回滚,但是遇到一个问题,在Controller类中调用Service层方法,配置的事务管理会失效,查询相关资料发现原因.其实Spring和SpringMVC俩个容器为父子关系,Spring为父容器,而SpringMVC为子容器.也就是说application.xml中应该负责扫描除@Controller的注解如@Service,而Spring

  • VIVO手机上del键无效OnKeyListener不响应的原因及解决方法

    在修改交易密码界面用到一个自定义输入框 类似这种(原谅丑了点~) 结果昨天有用户反馈在VIVO手机上回出现,Del键无效的问题~~~ 最后发现是:EdiText的OnKeyListener没有响应. 最后搜搜了一下,找到了解决方案:重写EdiTextView的InputConnectionWrapper的方法后解决了问题: 代码如下: public class ZanyEditText extends EditText { private OnDelKeyEventListener delKey

  • Android开发中requestfocus()无效的原因及解决办法

    前言 最近做公司项目的时候,经常会遇到一个问题,就是我为某个控件如EditText设置requestfocus()的时候不管用,比如说登陆的时候,我判断下用户输入的密码,如果正确就登陆,错误就提示密码错误,并且输入框获取焦点,但是实际中确不起作用 package com.example.hfs.requestfocusdemo; import android.content.Intent; import android.support.v7.app.AppCompatActivity; impo

  • Android 中ListView setOnItemClickListener点击无效原因分析

    Android 中ListView setOnItemClickListener点击无效原因分析

    前言 最近在做项目的过程中,在使用listview的时候遇到了设置item监听事件的时候在没有回调onItemClick 方法的问题.我的情况是在item中有一个Button按钮.所以不会回调.上百度找到了解决办法有两种,如下: 1.在checkbox.button对应的view处加android:focusable="false" 复制代码 代码如下: android:clickable="false" android:focusableInTouchMode=&

  • Oracle Index索引无效的原因与解决方法

    Oracle Index索引无效的原因与解决方法

    索引无效原因 最近遇到一个Oracle SQL语句的性能问题,修改功能之前的运行时间平均为0.3s,可是添加新功能后,时间达到了4~5s.虽然几张表的数据量都比较大(都在百万级以上),但是也都有正确创建索引,不知道到底慢在了哪里,下面展开调查. 经过几次排除,把问题范围缩小在索引上,首先在确定索引本身没有问题的前提下,考虑索引有没有被使用到,那么新的问题来了,怎么知道指定索引是否被启用. 判断索引是否被执行 1. 分析索引 即将索引至于监控状态下,对索引进行分析.如下对 ID_TT_SHOHOU

  • Java String.replace()方法"无效"的原因及解决方式

    首先我们来看个例子 public class Demo1 { public static void main(String[] args) { String aa="abcd"; aa.replace("a","f"); System.out.println("输出结果是"+aa); } } 运行结果是什么呢?我们先看看这个方法的api 返回一个新的字符串,用newChar替换此字符串中出现的所有oldChar 所以这里的结果

  • el-form resetFields无效和validate无效的可能原因及解决方法

    el-form resetFields无效和validate无效的可能原因及解决方法

    目录 问题导入 简单实例 1.官方案例 2.个人案例 resetFields失效及解决办法 validate失效及解决办法 3.model is required for validate to work! 结尾 问题导入 在使用 el-form 过程中,尤其是表单验证这一块,官方提供的 reserFields 方法以及验证方面存在一些坑,在此记录一下,给大家提供可能的解决办法. 简单实例 1.官方案例 先来看看官方提供的案例,对应的官网 表单验证 对应的代码 <el-form :model=&qu

  • 详谈php ip2long 出现负数的原因及解决方法

    php提供了ip2long与long2ip方法对ip地址处理. 1.ip2long - 将一个IPV4的字符串互联网协议转换成数字格式 int ip2long ( string $ip_address ) 参数: ip_address 一个标准格式的地址. 返回值: 返回IP地址转换后的数字 或 FALSE 如果 ip_address 是无效的. 2.long2ip - 将数字格式转换成一个IPV4的字符串互联网协议 string long2ip ( string $proper_address

  • 无法显示隐藏文件夹（修改过注册表也无效）的解决方法 附注册表文件

    无法显示隐藏文件夹（修改过注册表也无效）的解决方法 附注册表文件

    显示隐藏文件的通法: 正常情况下,按照如下顺序操作即可:打开"我的电脑"的"工具"菜单--"文件夹选项",在"查看"标签里,选择"显示所有文件和文件夹",并找到"隐藏受保护的操作系统文件(推荐)",将前面的勾去掉.如下图所示: 被病毒修改注册表后导致无法显示隐藏文件的解决方法: 如果是由于病毒所导致的,则有很多种情况,这里说一下较常用的两种方法. 法一:打开注册表编辑器,进入注册表项:H

随机推荐