Vuex + Vuejs + this.$store.dispatch('getDimensions', param)

组件中的数据

data() {
  return {
    searchForm: [{
      label: 'Name',
      subItems: []
    }]
  }
}

actions方法

const actions = {
  getDimensions({ commit }, param) {
    api.getDimensions(param).then(res => {
      commit(types.GET_DIMENSIONS, res.data);
    });
  }
}
const mutations = {
  [types.GET_DIMENSIONS](state, dimensions) {
    state.dimensions = dimensions;
  }
}

注意下面的输出语句,输出的时候有时候输出空,有时候输出后台传过来的数据,我觉得原因应该是this.$store.dispatch(‘getDimensions’, param);是异步请求,在输出的时候,this.$store.getters.dimensions的值还没有取到,所以为空。请问这样理解对吗?

methods: {
  getDimensions() {
    let param = {
      type: 2
    }
    this.$store.dispatch('getDimensions', param);
    console.log(this.$store.getters.dimensions);
  }
}

后来,我改成了这种形式

methods: {
  getDimensions() {
    let param = {
      type: 2
    }
    this.$store.dispatch('getDimensions', param)
      .then(res => {
        console.log(res);
        console.log(this.$store.getters.dimensions);
      });
  }
}

这时,输出的res一直为undefined,this.$store.getters.dimensions有时候为空,有时候又输出后台的数据,这是为什么呢?

我先在想做的就是将this.$store.getters.dimensions赋值给this.searchForm[0].subItems

回答:

异步处理放在 action 中没有问题,问题是你需要在异步回调后,去 commit 修改,然后 return promise 出来,通过 then 监听。
还有就是如果对数据有依赖监听,用 watch 啊。

回答:

你的 action 是异步的,dispatch 紧接着 log 当然不会输出新得到的结果。

这么写完全没有发挥 Vuex 的作用。 Vue 的一个优势在于响应式,Vuex 的数据也是响应式的,拥抱数据驱动就省事很多。

所以直接让 this.searchForm[0].subItems = this.$store.state.dimensions 就可以了,dimensions 一改变会自动通知 subItems

而且注意到你的 subItems 数组一开始是空的,了解 Vue 数组的一些局限

回答:

谢邀,按照下面的思路。你是可以拿到异步赋值的dimensions。

import { mapGetters } from 'vuex'

export default {
    computed: mapGetters(['dimensions']),
    methods: {
      getDimensions() {
        let param = {
          type: 2
        }
        this.$store.dispatch('getDimensions', param);
        console.log(this.$store.getters.dimensions);
      }
    },
    watch: {
        dimensions(val , oval){ // 通过watch 监控,异步赋值后dimensions的变化。
            if(val) {
                this.searchForm[0].subItems = val
            }
        }
    }
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注