Asynchronous Vuex:计算属性返回未定义-asyc Axios

我对我的数据库进行了异步axios调用，当站点加载时，我将通过一个操作来调度该调用。 （我已尝试在我的Vue路由器上调度BeforeCenter（），在我的表单.Vue上调度beforeCreated（）和Created（））

我有一个使用getter返回信息的计算属性

我遇到的问题是，数据是在页面完成加载并返回未定义的结果后到达的-页面上没有呈现任何内容

如果我检查我的Vue DevTools，则所有数据都位于状态的正确位置

我怎样才能在页面加载之前完成数据加载

//行动

async loadInputs({ state, getters, commit, dispatch }) {    
 if (!state.loading) {
  commit('setLoading', true)

  const inputLists = axios.get('/companyInputLists')
  const inputs = axios.get('/companyInputs')

  commit('setLoading', false)
  commit('loadInputs' , [await inputLists, await inputs])

 }
},

set ({commit}, value) {
  commit('updateValue', value)
},

//突变子

setLoading(state, value) {
  state.loading = value
},

 loadInputs(state, data){
  state.layout = {}
  state.data = {}
  data[0].data.map(list => {
    list['inputs'] = []
    state.layout[list.order] = list

    data[1].data.map(input => {
        if(input.list_id == list.id){
            state.layout[list.order].inputs.push(input)
            state.data[input.label] = ''
        }
     })
   })
 },

updateValue(state, value) {
  state.data[value.type] = value.value
},

//吸气剂

get(state) {
    console.log(state)
    return state
 },
}

//FORM.VUE

  <span>

    //LIST TEST and v-if test
    <div v-if="lists">
      {{lists}}
    </div>
    test
    {{ lists }}



<v-layout row wrap justify-center>

  <draggable class="dragArea layout row wrap justify-center" :options="{group:'lists'}">
    <v-flex v-for="list in lists" v-bind:key="list.index" :class="[list.label, flexBoxSize(list.size)]">

      <v-subheader v-text="list.label"></v-subheader>

      <draggable class="dragArea layout row wrap" :options="{group:'inputs'}">
        <v-flex v-for="item in list.inputs" v-bind:key="item.index" :class="[item.label, flexBoxSize(item.size)]">

          <textfield v-if="item.type_id == 1" formType="clientForm" :label="item.label" :required="item.required"></textfield>
          <email v-if="item.type_id == 2" formType="clientForm" :label="item.label"  :required="item.required"></email>
          <phone v-if="item.type_id == 3" formType="clientForm" :label="item.label"  :required="item.required"></phone>
          <calendar v-if="item.type_id == 4" formType="clientForm" :label="item.label"  :required="item.required"></calendar>
          <googleMap v-if="item.type_id == 5" formType="clientForm" :label="item.label"  :required="item.required"></googleMap>
          <autocomplete v-if="item.type_id == 6" formType="clientForm" :label="item.label"  :required="item.required"></autocomplete>


        </v-flex>
      </draggable>

    </v-flex>
  </draggable>


  <v-layout row wrap justify-center>
    <submitButton formType="clientForm" path="/clientForm" :references="this.$refs"></submitButton>
    <clearButton formType="clientForm" :references="this.$refs"></clearButton>
  </v-layout>

  </v-layout>
 </span>
</template>

<script>
export default {
  components: {
    draggable,
  },

  beforeCreate(){
    this.$store.dispatch('clientForm/loadInputs')
  },

  computed: {
    lists: {
      get() {
        return this.$store.getters['clientForm/get'].layout
      },
      set(value) {
        this.$store.commit('clientForm/updateInputList', value)
      }
    }
  },

//列表测试和v-if测试
{{lists}}
测试
{{lists}}
我认为您可以简化
加载输入操作：

async loadInputs ({commit, state}) {
  if (!state.loading) {
    commit('setLoading', true)

    const inputLists = axios.get('/companyInputLists')
    const inputs = axios.get('/companyInputs')

    commit('setLoading', false)
    commit('loadInputs' , [await inputLists, await inputs])
   }
}

组成部分：

export default {
  components: {
    draggable,
  },
  computed: {
    lists: {
      get() {
        return this.$store.getters['clientForm/get'].layout
      },
      set(value) {
        this.$store.commit('clientForm/updateInputList', value)
      }
    }
  },
  created () {
    this.$store.dispatch('clientForm/loadInputs')
  },
}

去年寒假期间，我找到了答案，并意识到这里从来没有发布过明确的结论。经过反复尝试和阅读文档，我在Vue.js文档中找到了答案


Vue.set（目标、键、值）
将属性添加到反应对象，确保新属性也是反应的，从而触发视图更新。这必须用于向反应对象添加新属性，因为Vue无法检测正常的属性添加（例如This.myObject.newProperty='hi'）

使用此函数，我可以通过axios调用加载数据，并让Vue检测更改并更新DOM

另外，您可能需要注意Vue.delete以删除具有反应性的数据。
在
loadInputs
mutator？中这一行的作用是什么
list['inputs]=[]
在对象中创建一个数组，以将输入推送到“状态”。布局[list.order]。输入。推（输入）确定。你能添加getters定义来回答吗？好的，我添加了getters这一行
返回这个。$store.getters['clientForm/get']。layout
真的有效吗？这会导致未捕获的引用错误：InputList没有定义否。你忘了重写constats的名字了。再试一次。是的，就是这样。我也错过了hahaIt已经有一段时间了，但是您是否还记得您将Vue.set（）语句放置在何处的更多细节？