web-dev-qa-db-fra.com

Push to vuex store array not working in VueJS

J'utilise Vuex pour afficher une liste d'utilisateurs de 'store.js'. Ce fichier js a un tableau comme celui-ci.

var store = new Vuex.Store({
  state: {
    customers: [
      { id: '1', name: 'user 1',},
    ]
  }
})

Je veux insérer un nouvel ensemble de valeurs dans le même tableau

{id: '1', nom: 'utilisateur 1',}

Les valeurs ci-dessus sont obtenues à partir d'une URL (vue-resource). Voici le code pour pousser les données obtenues vers le tableau. Cependant, les données n'insèrent pas

mounted: function() {
      this.$http.get('http://localhost/facebook-login/api/get_customers.php')
      .then(response => {
        return response.data;
      })
      .then(data => {
        store.state.customers.Push(data) // not working!!
        console.log(data) // prints { id: '2', name: 'User 2',}
        store.state.customers.Push({ id: '2', name: 'User 2',})
      });
    }
javascriptarraysvue.jsvuejs2vue-resource
12
Gijo Varghese

Vous essayez de modifier l'état vuex à partir du composant vue, vous ne pouvez pas le faire. Vous ne pouvez modifier le magasin vuex qu'à partir d'une mutation

Vous pouvez définir une mutation comme suit:

var store = new Vuex.Store({
  state: {
    customers: [
      { id: '1', name: 'user 1',},
    ]
  },
  mutations: {
     addCustomer (state, customer) {
      // mutate state
      state.customers.Push(customer)
    }
  }
})

Vous pouvez maintenant valider cette mutation à partir de l'instance vue, comme suit:

mounted: function() {
      this.$http.get('http://localhost/facebook-login/api/get_customers.php')
      .then(response => {
        return response.data;
      })
      .then(data => {
        store.commit('addCustomer', { id: '2', name: 'User 2'})
      });
    }
30
Saurabh