vuex 使用遇到的坑

最新推荐文章于 2024-05-03 17:50:53 发布

weixin_34255055

最新推荐文章于 2024-05-03 17:50:53 发布

阅读量209

点赞数

文章标签： python 爬虫

原文链接：https://my.oschina.net/u/2510955/blog/796365

版权

2019独角兽企业重金招聘Python工程师标准>>>

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>

学习中...

转载于:https://my.oschina.net/u/2510955/blog/796365