Question

当我选择其他品牌时，我正在尝试更新我的联系人。当我选择一个新品牌时，应该更新联系人。因此，我清除了品牌的联系人列表，然后再次填写。

尽管如此，在我的Vuex设置中无法清除数组。有谁知道为什么吗？

这是我的商店文件：

export default {
    state: {
        brands: Array(), //Might be used later on, if not, remove.
        brandsForDropdown: Array(),
        brandContactsForDropdown: Array(),
    },
    getters: {
      brands: state => {
        return state.brands;
      },
      brandsForDropdown: state => {
        return state.brandsForDropdown
      },
      brandContactsForDropdown: state => {
        return state.brandContactsForDropdown
      }
    },
    actions: {
        getBrands({state, commit}) {
            Vue.http.get(process.env.VUE_APP_API_SERVER + '/brands').then(response => {
                if(response.body.length > 0) {
                    for (var i = 0; i < response.body.length; i++) { 
                        commit('pushBrands', {"name" : response.body[i].name, "value" : response.body[i].id})
                    }
                }
              }, response => {
                // error callback
              });
        },
        getBrandContacts({state, commit}, payload) {
            //commit('resetBrandContacts')
            Vue.http.get(process.env.VUE_APP_API_SERVER + '/brands/contacts/' + payload.value).then(response => {
                if(response.body.length > 0) {
                    let newArray = [];
                    for (var i = 0; i < response.body.length; i++) { 
                        newArray.push({"name" : response.body[i].firstname + " " + response.body[i].surname, "value" : response.body[i].id})
                    }
                    commit('pushBrandContact', newArray)
                }
              }, response => {
                // error callback
              });
        }
    },
    mutations: {
        pushBrands(state, payload) {
            state.brandsForDropdown.push(payload)
        },
        resetBrands(state) {
            state.brandsForDropdown = []
        },
        resetBrandContacts(state) {
            state.brandContactsForDropdown = []
        },
        pushBrandContact(state, payload) {
            console.log(payload)
            state.brandContactsForDropdown = payload
            console.log(state.brandContactsForDropdown)
        }
    }
}

这是我的完整组件代码：

<script>
export default {
  data () {
    return {
      productName: null,
      productBrand: null,
      brands: this.$store.getters.brandsForDropdown,
      selectedBrand: null,
      brandContacts: this.$store.getters.brandContactsForDropdown,
      selectedContacts: null,
    }
  },
  computed: {
  },
  watch: {
      selectedBrand: function() {
          if(this.selectedBrand != null) {
              this.$store.dispatch('getBrandContacts', this.selectedBrand)
              //this.brandContacts = this.$store.getters.brandContactsForDropdown
          }
          console.log(this.brandContacts);
      }
  },
  methods: {
  },
  mounted: function() {
  this.$store.dispatch('getBrands')
  }
}
</script>

上面是我完整的Vuex模块。

Answer 1

我认为您到达了Gotchas之一：

我不确定是否是在这种情况下更新数组，并且它不会检测到更改，但是更新数组的最佳方法是放置新数组而不是添加新数组：

getBrandContacts({state, commit}, payload) {
  Vue.http.get(process.env.VUE_APP_API_SERVER + '/brands/contacts/' + 
               payload.value).then(response => {
    if(response.body.length > 0) {
      let newArray = []
      for (var i = 0; i < response.body.length; i++) { 
        newArray.push({"name" : 
                       response.body[i].firstname + " " + response.body[i].surname, "value" : 
                       response.body[i].id})
      }
      commit('pushBrandContact', newArray)
    }
  }, response => {
    // error callback
  });
}

和突变：

pushBrandContact(state, payload) {
  state.brandContactsForDropdown = payload
}

还不清楚您如何处理组件内部的数据，这是数据吗？或计算？共享此代码将有所帮助。您还说数组不清楚，这是什么意思？有旧的价值观吗？在vuex状态？在您的组件上？缺少很多帮助信息。

更新

仅在组件初始化时才更新数据属性，并且当您手动更新（this.data = newData）时，在更新Vuex时不会更新它们。

您需要像这样将brandContacts: this.$store.getters.brandContactsForDropdown从数据对象移动到计算对象： brandContacts(){ this.$store.state.brandContactsForDropdown }

这会在vuex中的brandContactsForDropdown属性更新时强制vue更新。

https://vuejs.org/v2/guide/computed.html

Vuex突变状态变量不起作用

1 个答案: