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>

在加载时，在我对页面执行操作或刷新页面之前，created（）上的值不会绑定。

我试过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

vue mapGetters没有按时到达

1 个答案: