VueX：等到商店数据被加载答案

【问题标题】：VueX: wait until store data is loadedVueX：等到商店数据被加载
【发布时间】：2018-08-04 17:35:16
【问题描述】：

我目前正试图显示一个表单来编辑现有网站。

我的问题是一个站点有大约 60 个输入字段，并且为每个输入编写 setter 和 getter 似乎不是一个好方法。

所以我能想到的最好的办法是将我的商店数据保存到一个局部变量中，编辑该局部变量并将其发回。

Edit.vue

<b-form-input id="currentSiteName" v-model="this.editSite.title"></b-form-input>

...
computed: {
  editSite() {
    return this.$store.state.currentSite
  }
},
mounted: function() {
  this.$store.dispatch('SHOW_SITE', {
    siteId: this.$route.params.id
  });
},

商店操作

SHOW_SITE: function ({ commit }, siteParams) {
  http.get('/sites/' + siteParams.siteId).then((response) => {
      commit('SHOW_SITE', {
        site: response.data.foundSite
      });
    },
    (err) => {
      // eslint-disable-next-line
      console.log(err);
    })
},

存储突变

SHOW_SITE: (state, { site }) => {
    state.currentSite = site;
},

如果我查看我的 vue-dev-tools，我可以看到 editSite 具有正确的值，并且这些值都显示在表单中，但出现以下两个错误：

Error in event handler for "input": "TypeError: Cannot read property 'editSite' of null"

Cannot read property 'editSite' of null at callback

我在这里做错了什么还是有更好的 /c 方法来解决我的问题？

任何帮助将不胜感激！

【问题讨论】：

好吧，阅读您的代码，我相信您的editSite 问题与vuex 完全无关。我认为您应该设置 v-model="editSite.title" 而不使用 this 引用，以消除那个确切的错误。这并不意味着您的程序看起来是正确的。我不确定当您为计算属性设置v-model 时会发生什么，但恐怕这没什么好。

标签： javascript vue.js vuex

【解决方案1】：

您应该使用 getter 来访问存储状态。

import { mapGetters, mapActions } from 'vuex'

async mounted() {
  await this.showSite(this.$route.params.id);
},
computed: {
  ...mapGetters([
    'currentSite',
  ]),
},
methods: {
  ...mapActions([
    'showSite'
  ]),
},

现在，通过这种方式，您应该能够访问存储状态而不会出现 null 异常。你应该对 http.get 使用异步等待。这样你的代码看起来更干净。

【讨论】：

使用 mapGetters 和 mapState 有区别吗？数据？

【解决方案2】：

以下文档对我认为您正在努力实现的目标提供了有用的解释：https://vuex.vuejs.org/guide/forms.html

简而言之，将表单字段的:value 属性绑定到计算属性。监听 change 事件并确保 Vuex 存储属性的实际突变发生在 Vuex 突变处理程序中。另外，请注意 MapState 函数的使用，它充当了将存储属性映射到组件计算属性的一个很好的小帮手。

确保在 AJAX 请求完成并更新存储之前考虑存储状态。为存储设置默认状态将有助于减轻任何空引用。另外值得注意的是，"this.editSite.title" 属性绑定中的this. 是不必要的。

【讨论】：