Push to vuex Speicherarray funktioniert nicht in VueJS

Question

Ich benutze Vuex um eine Liste von Benutzern aus 'store.js' anzuzeigen. Diese js-Datei hat ein Array wie dieses.

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

Ich möchte

einen neuen Satz von Werten auf das gleiche Array einzufügen {id: '1', Name: 'user 1'}

Die obigen Werte werden von einer URL (Vue-Ressource) erhalten. Unten ist der Code, um die erhaltenen Daten in das Array zu übertragen. Allerdings werden die Daten nicht

Einfügen

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

Answer 1

Sie versuchen die vuex Zustand von der vue Komponente zu ändern, können Sie es nicht tun. Sie können nur vuex Speicher von einem mutation

ändern Sie eine Mutation wie folgt definieren:

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

Jetzt können Sie diese Mutation aus der vue Instanz begehen, wie folgt vor:

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