文档章节

vuex 使用遇到的坑

p
 pengqinmm
发布于 2016/11/29 18:51
字数 354
阅读 273
收藏 3

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
粉丝 1
博文 62
码字总数 34998
作品 0
西安
程序员
Vue进阶(四):使用 Vuex + axios 发送请求

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

sunhuaqiang1
05/05
0
0
理解vuex -- vue的状态管理模式

vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。...

wenxingjun
07/25
0
0
Vue基于vuex和axios实现加载效果以及axios的安装配置

本篇文章给大家带来的内容是关于Vue基于vuex和axios拦截器实现loading效果及axios的安装配置,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。转载 http://www.php.cn/js-t...

大灰狼的小绵羊哥哥
09/07
0
0
真正掌握vuex的使用方法(一)

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

张培跃
05/17
0
0
vuex组件 vuex-persistedstate

vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,虽然我们也可以同事缓存到storage中做两步操作,但是vuex-persistedstate组件已经帮我们完成了同步更新...

donggggg
05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20.27 分发系统介绍~ 20.30 expect脚本传递参数

分发系统介绍分发系统-expect讲解(也就是一个分发的脚本)场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因...

洗香香
25分钟前
1
0
设计一个百万级的消息推送系统

前言 首先迟到的祝大家中秋快乐。 最近一周多没有更新了。其实我一直想憋一个大招,分享一些大家感兴趣的干货。 鉴于最近我个人的工作内容,于是利用这三天小长假憋了一个出来(其实是玩了两...

crossoverJie
31分钟前
1
0
软件架构:5种你应该知道的模式

Singleton(单例模式)、仓储模式(repository)、工厂模式(factory)、建造者模式(builder)、装饰模式(decorator)……大概每个上课听讲的程序员都不会陌生——软件的设计模式为我们提供...

好雨云帮
43分钟前
2
0
OSChina 周二乱弹 —— 这只是一笔金钱交易

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《暮春秋色》- 窦唯 / 译乐队 《暮春秋色》- 窦唯 / 译乐队 手机党少年们想听歌,请使劲儿戳(这里) @我没有抓狂:跨服聊...

小小编辑
55分钟前
617
16
df命令、du命令 、磁盘分区

9月25日任务 4.1 df命令 4.2 du命令 4.3/4.4 磁盘分区 4.1、命令 :df #磁盘空间使用情况 [root@zgxlinux-02 ~]# df 按字节显示 1000Byte=1KB 1000KB=1MB 1000MB=1GB ...

zgxlinux
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部