Vue MapGetters не вовремя

Question

Я использую 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>

При загрузке значения функции create () не связываются, пока я не выполню действие на странице или не обновлю страницу.

Я пробовал mount () подключил то же самое.

Мой магазин 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
  }

Answer 1

Проблема в том, что вы вызываете асинхронный метод в 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