Vuex突变状态变量不起作用

Question

I'm trying to update my contacts when a different brand is selected. When I select a new brand, the contacts should be updated. So I clear my array of the contacts of the brand and then fill it again.

Somehow though, the clearing of the array doesn't work in my Vuex setup. Is there anyone who knows why?

This is my Store file:

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)
        }
    }
}

This is my full component code:

<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>

And up there is my full Vuex module.

Answer 1

I assume you reached one of the Gotchas :

I'm not sure if this is the case where you update the array and it will not detect the change, but the best way to update the array would be to place a new array instead of adding to it:

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
  });
}

and in mutations:

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

It is also not clear how you work with the data inside the component, is it a data? or in computed? sharing this code will help. You also say the array doesn't clear, what you mean? it have the old values? in the vuex state? on in your component? a lot of info to help is missing.

Update

The data properties are getting updated only on init of the component, and when you manually update it ( this.data = newData ), they will not be updated when Vuex is updated.

You need to move the brandContacts: this.$store.getters.brandContactsForDropdown from the data object to the computed object like this: brandContacts(){ this.$store.state.brandContactsForDropdown }

This will force vue to update when the brandContactsForDropdown property in vuex updates.

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