Question

我目前只能尝试显示表单来编辑现有网站。

我的问题是，一个站点大约有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方法来解决我的问题？

任何帮助将不胜感激！

Answer 1

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

import { mapGetters, mapActions } from 'vuex'

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

现在，通过这种方式，您应该能够访问存储状态而没有null异常。并且您应该对http.get使用async await。这样，您的代码看起来就更干净了。

Answer 2

以下文档提供了有关我认为您要达到的目标的有用解释：https://vuex.vuejs.org/guide/forms.html

简而言之，将表单字段的:value属性绑定到计算属性。侦听更改事件，并确保Vuex存储属性的实际变异发生在Vuex变异处理程序中。另外，请注意MapState函数的使用，该函数是将商店属性映射到组件计算属性的好帮手。

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

VueX：等到加载存储数据

2 个答案: