Vuex Mutating переменная состояния не работает

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 }

Это заставитvue для обновления при обновлении свойства brandContactsForDropdown в vuex.

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