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

Question

组件中的数据

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

谢邀，按照下面的思路。你是可以拿到异步赋值的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
            }
        }
    }
}