文档章节

vuex 使用遇到的坑

p
 pengqinmm
发布于 2016/11/29 18:51
字数 354
阅读 244
收藏 3
点赞 0
评论 0

1 报错:mutations must bu synchronous

查看官方文档,才发现mutations只支持同步修改state, 如果是异步要放在actions中,

下面的做法会报错,要把api.callAsyncMethod...放在actions中

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

2 报错:duplicate getters 

如果有多个模块,注意getters中每个对象的名字必须唯一,不同模块最好以模块名为前缀

store/modules/person.js

const getters = {
  name:  state => state.name
}

如果另一个文件 store/modules/cat.js

const getters = {
  name:  state => state.name
}

那么会报错,需要将其中一个文件改为

store/modules/person.js

const getters = {
  personName:  state => state.name
}

3 状态state的修改遇到延时会失效

data () {
  return {
    editing: false
  }
},

methods: {
  changeStatus (e) {
    this.modifyProviderStatus({
      vendorId: this.provider.id,
      status: +e.target.value
    })

    setTimeout(function () {
      this.editing = false
    }, 500)
  }
}

changeStatus()执行后editing = false, 但页面中的editing并没有改变,去掉延迟就好了,具体是什么原因,还不清楚

data () {
  return {
    editing: false
  }
},

methods: {
  changeStatus (e) {
    this.modifyProviderStatus({
      vendorId: this.provider.id,
      status: +e.target.value
    })

    this.editing = false
  }
}

 

4 嵌套的属性在component中获取,会拿不到

<div class="control">
  <input class="input" name="itemDescribe" :value="productDetail.itemMeter.itemDescribe" @input="inputProductDescription" placeholder="商品描述"/>
</div>

这样写,上面的value值会报‘can not get itemDescribe of undefined’, 也就是说itemMeter是不存在的,但返回的数据确实存在itemMeter, 所以,需要手动将三层对象结构改成两层,使用下面的语法就可以拿到itemDescribe属性值了

<div class="control">
  <input class="input" name="itemDescribe" :value="productDetail.itemDescribe" @input="inputProductDescription" placeholder="商品描述"/>
</div>

 

学习中...

© 著作权归作者所有

共有 人打赏支持
p
粉丝 0
博文 55
码字总数 32083
作品 0
西安
程序员
Vue进阶(四):使用 Vuex + axios 发送请求

Vue进阶(四):使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 目前主流的 Vue 项目,都选择...

sunhuaqiang1 ⋅ 05/05 ⋅ 0

真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃 ⋅ 05/17 ⋅ 0

[译]为什么 VueX 是前端与 API 之间的完美接口

原文地址:Why VueX Is The Perfect Interface Between Frontend and API 原文作者:KBall 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:zhmhhu 校对者:sunui, Te...

zhmhhu ⋅ 06/04 ⋅ 0

Super-Vuex 状态管理最佳实践

Vuex作为vue中核心的状态管理组件,时常遇到编写繁琐的问题。是否我们可以通过一套方案就可以达到只定义数据结构而不需要写无数的 以及。 所以,原则上我们是让vuex变的更加轻量和简单。 Su...

沈赟杰 ⋅ 06/08 ⋅ 0

真正掌握vuex的使用方法(七)----完结

今天是关于vuex的最后一篇文章了!怎么说呢?且行且珍惜吧!!认真尝试每一行代码! 之前的文章当中,我们把所有的数据都存放到了 vuex文件夹当中的store.js当中。但随着将来项目的复杂度增大...

张培跃 ⋅ 05/27 ⋅ 0

开发了一款写作软件(OSX,Windows),附带Electron开发指南

断断续续写了个把月,终于在昨天完成了第一版… 笔落写作 一款帮助网络写手更方便地进行小说创作的PC软件,目前支持 OSX/Windows 名字灵感来自于杜甫的一首诗,前两句是: 《寄李十二白二十韵...

林水溶 ⋅ 05/15 ⋅ 0

vuex实现路由切换动画同时嵌套路由同样使用

示例 http://47.94.90.89/dist/#/aaa 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全局安装vue......

任倩坤 ⋅ 05/18 ⋅ 0

大型Vuex应用程序的目录结构

译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译...

Fundebug ⋅ 06/13 ⋅ 0

vuex其实超简单,喝完这3步,还有3步

上一篇 vuex其实超简单,只需3步 简单介绍了vuex的3步入门,不过为了初学者容易消化,我削减了很多内容,这一节,就是把少掉的内容补上, 如果你没看过上篇,请戳链接过去先看一下再回来,否则,你会觉...

Noahlam ⋅ 05/21 ⋅ 0

真正掌握vuex的使用方法(二)

从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍! 接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票...

张培跃 ⋅ 05/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 36分钟前 ⋅ 0

彻底删除Microsoft Office的方法

参照此链接彻底删除Office https://support.office.com/zh-cn/article/%e4%bb%8e-pc-%e5%8d%b8%e8%bd%bd-office-9dd49b83-264a-477a-8fcc-2fdf5dbf61d8?ui=zh-CN&rs=zh-CN&ad=CN......

Kampfer ⋅ 51分钟前 ⋅ 0

大盘与个股之间关系

大盘走多:积极出手 顺势加码 大盘走空: 少量出手 退场观望 大盘做头:逆势减码 少量操作 大盘做底 : 小量建仓 小量试单

guozenhua ⋅ 52分钟前 ⋅ 0

Day16 LVM(逻辑卷管理)与磁盘故障小案例

lvm详解 简述 LVM的产生是因为传统的分区一旦分区好后就无法在线扩充空间,也存在一些工具能实现在线扩充空间但是还是会面临数据损坏的风险;传统的分区当分区空间不足时,一般的解决办法是再...

杉下 ⋅ 59分钟前 ⋅ 0

rsync实现多台linux服务器的文件同步

一、首先安装rsync,怎样安装都行,rpm,yum,还是你用源码安装都可以。因为我用的是阿里云的ESC,yum install rsync就ok了。 二、配置rsync服务 1.先建立个同步数据的帐号 123 groupadd r...

在下头真的很硬 ⋅ 今天 ⋅ 0

前端基础(三):函数

字数:1685 阅读时间:5分钟 函数定义 在最新的ES规范中,声明函数有4中方法: -函数声明 -函数表达式 -构造函数Function -生成器函数 1.函数声明 语法: function name([param[, param2 [....

老司机带你撸代码 ⋅ 今天 ⋅ 0

Java虚拟机的Heap监狱

在Java虚拟机中,我是一个位高权重的大管家,他们都很怕我,尤其是那些Java 对象,我把他们圈到一个叫做Heap的“监狱”里,严格管理,生杀大权尽在掌握。 中国人把Stack翻译成“栈”,把Hea...

java高级架构牛人 ⋅ 今天 ⋅ 0

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 今天 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 今天 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部