Vuex getter 通过异步操作返回 null

Question

我的商店有以下代码：

export default {
state:{

},
actions : {
loadData ({commit}){
    const response = await axios.request({url:'http://mydata.com/data',method:'get'});
    commit('setData', response.data);
    console.log("Value set", response.data);
}
},
mutations: {
    setData(state,data){
        state.names = data.names;
        state.values = data.values;

    }
},
getters: {
    getNames() {
    return state.names() ; 
    },
    getValues() {
        return state.values();
    }
}
}

在我的父组件中：

 <template>
        <div>
            <child-element :values="getValues"></child-element>
        </div>
    </template>
    <script>
    import {mapGetters,mapActions}
    export default {
        computed: {
            ...mapGetters(['getValues'])
        },
        created(){
            loadData();
console.log(getValues);
        }
    }
    </script>

我的子组件：

<template>
    <div>
        <h1> {{ values["ma"] }}
    </div>
</template>

<script>
    export default {
        props:{
            values
        }
        mounted(){
            console.log(this.values);
        }
    }
</script>

问题是子组件中的 this.values 总是显示未定义，并且在子组件的消息之后记录了从操作中设置的消息值； getValues 在父组件中未定义，而 values 道具在子组件中未定义

根据我的预期，认为 parent 的 mount 事件将在 create 之后发生，并且由于 create 是设置 getter 中使用的数据的位置，因此应该设置 child 挂载时的值。

为了正确获取和使用我的数据，我缺少什么？

Answer 1

您永远不会等待从 Vuex 触发您的异步操作：

created(){
  loadData();
  console.log(getValues);
}

应该变成：

async created() {
    await this.loadData()
    console.log(getValues)
}

您的操作也应该在完成后返回一个承诺：

actions : {
  async loadData ({commit}){
    const response = await axios.request({url:'http://mydata.com/data',method:'get'});
    commit('setData', response.data);
    console.log("Value set", response.data);

    return Promise.resolve()

  }
}

Answer 2

1. 您需要在状态中声明names和values：

state:{
  names: null, // or [] if you wish to always have an array 
  values: null // or [] if you wish to always have an array  
},

1. 像这样更正你的吸气剂：

getters: {
    getNames: state => state.names,
    getValues: state => state.values
}

1. 您需要在组件中调用 loadData 时添加 await 关键字（并在方法中添加 async）。