文档章节

vuex 使用遇到的坑

p
 pengqinmm
发布于 2016/11/29 18:51
字数 354
阅读 292
收藏 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
西安
程序员
私信 提问
理解vuex -- vue的状态管理模式

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

wenxingjun
07/25
0
0
Vue进阶(四):使用 Vuex + axios 发送请求

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

sunhuaqiang1
05/05
0
0
真正掌握vuex的使用方法(一)

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

张培跃
05/17
0
0
Vue基于vuex和axios实现加载效果以及axios的安装配置

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

大灰狼的小绵羊哥哥
09/07
0
0
vuex组件 vuex-persistedstate

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

donggggg
05/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 眼看着这个陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
5分钟前
0
1
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
37分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部