vue mapGetters가 제 시간에 도착하지 않습니다.

vue mapGetters가 제 시간에 도착하지 않습니다.

애플리케이션에서 vuex를 사용하여 상태를 관리하고 양식으로 단방향 바인딩을 수행하고 있습니다.

<script>
  import { mapGetters } from 'vuex'
  import store from 'vuex-store'

  import DataWidget from '../../../../uiComponents/widget'
  export default {
    data () {
      return {
        isEdit: false,
        msg: {
          id: 0,
          content: '',
          isEnabled: false
        }
      }
    },
    components: {
      DataWidget
    },
    computed: mapGetters({
      messageId: 'messageId',
      messageContent: 'messageContent',
      isMessageEnabled: 'isMessageEnabled',
      isMessageValid: 'isMessageValid'
    }),
    methods: {
      onSave () {
        store.dispatch('saveMessage', this.msg, { root: true })
        if (this.isMessageValid) {
          this.isEdit = !this.isEdit
        }
      }
    },
    created () {
      this.msg.id = this.messageId
      this.msg.content = this.messageContent
      this.msg.isEnabled = this.isMessageEnabled
    }

  }
</script>

<b-form-textarea id="content" v-model="msg.content" :rows="3" required aria-required="true" maxlength="250"></b-form-textarea>

로드 시 페이지에서 작업을 수행하거나 페이지를 새로 고칠 때까지 created()의 값은 바인딩되지 않습니다.

저는 같은 것을 장착()해 보았습니다.

My Vuex 저장소(메시지 모듈)는 다음과 같습니다.

const state = {
  messageId: 0,
  messageContent: '',
  isMessageEnabled: false,
  isMessageValid: true
}

const getters = {
  messageId: state => state.messageId,
  messageContent: state => state.messageContent,
  isMessageEnabled: state => state.isMessageEnabled,
  isMessageValid: state => state.isMessageValid
}

const actions = {
  getMessage ({commit, rootGetters}) {
    api.fetch('api/Preference/Message', rootGetters.token)
    .then((data) => {
      commit(types.MESSAGE_LOAD, data)
    })
  }
}

const mutations = {
  [types.MESSAGE_LOAD] (state, payload) {
    state.messageId = payload ? payload.id : 0
    state.messageContent = payload ? payload.content : ''
    state.isMessageEnabled = payload ? payload.enabled : false
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

그리고 글로벌 액션(action.js)이 있습니다. 여러 데이터를 가져옵니다.

export const loadSetting = ({ commit, rootGetters }) => {
  api.fetchAsync('api/Preference/all', rootGetters.token)
  .then((data) => {
    commit(types.MESSAGE_LOAD, data.message)
    commit(types.HELPDESK_LOAD, data.helpDesk)
    commit(types.VOLUME_LOAD, data.volumes)
    commit(types.DOWNLOAD_LOAD, data.downloadService)
  })
}

나의 api 호출:

  async fetchAsync (url, token = '') {
    let data = await axios.get(HOST + url, {
      headers: {
        'Authorization': 'bearer ' + token
      }
    })
    return data
  }

문제는 Vuex에서 비동기 메서드를 호출하지만created방법, 당신은 그것을 동기화 작업처럼 처리하고 있고 값을 합니다.

생성한 계산된 속성은 반응적이며 모든 변경 사항에 대해 업데이트되므로 이 속성을 사용해야 합니다.계산된 쓰기가 가능하도록 변경하려면 다음과 같이 변경합니다.

    computed: {
       ...mapGetters({
          messageId: 'messageId',              
          isMessageEnabled: 'isMessageEnabled',
          isMessageValid: 'isMessageValid'
        }),
        messageContent(){
            get () {
               return this.$store.getters.messageContent
            },
            set (value) {
               //this is just an example, you can do other things here
               this.$store.commit('updateMessage', value)
            }
        }
    }

사용할 html을 변경messageContent:

<b-form-textarea id="content" v-model="messageContent" :rows="3" required aria-required="true" maxlength="250"></b-form-textarea>

자세한 내용은 다음을 참조하십시오. https://vuex.vuejs.org/en/forms.html

언급URL : https://stackoverflow.com/questions/47389882/vue-mapgetters-not-getting-on-time