Vuex: 계산된 속성이 정의되지 않음 - asyc Axios

Vuex: 계산된 속성이 정의되지 않음 - asyc Axios

사이트가 로드될 때 액션과 함께 디스패치하는 DB에 대한 비동기적 Axios 호출이 있습니다.(Vue-router에서는 Enter() 이전, Form에서는 Created() 이전 및 Created()에서 디스패치를 시도했습니다.Vue)

나는 게터를 사용하여 정보를 반환하는 계산된 속성을 가지고 있다.

문제가 발생하고 있는 것은, 페이지의 로드가 끝난 후에 데이터가 도달해, 「정의되지 않음」을 반환하는 것입니다.페이지에 렌더링 하는 것은 아무것도 없습니다.

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)
      }
    }
  },

페이지 로드 후 데이터를 표시하는 Vuex Dev 도구

저는 작년 겨울 방학 동안 답을 알아냈고, 여기에 명확한 결론이 나온 적이 없다는 것을 깨달았습니다.많은 시행착오를 거쳐 문서를 읽어본 후 Vue.js 문서에서 답을 발견했습니다.

https://vuejs.org/v2/api/ #Vue-set

Vue.set(타깃, 키, 값) 반응형 개체에 속성을 추가하여 새 속성도 반응형인지 확인하므로 보기 업데이트를 트리거합니다.Vue가 정상적인 속성 추가(예: this.myObject.newProperty = 'hi')를 감지할 수 없기 때문에 반응형 개체에 새 속성을 추가하려면 이 옵션을 사용해야 합니다.

이 기능을 사용하여 Axios 호출을 통해 데이터를 로드하고 Vue에게 변경을 감지하고 DOM을 업데이트할 수 있었습니다.

또한 반응성이 있는 데이터를 삭제하기 위해 Vue.delete에 주의할 수도 있습니다.

내 생각에 너는 그 일을 단순화할 수 있을 것 같아.loadInputs액션:

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')
  },
}

언급URL : https://stackoverflow.com/questions/47537868/vuex-computed-property-returns-undefined-asyc-axios