Путь в массив хранилища vuex не работает в VueJS

Question

Я использую Vuex, чтобы показать список пользователей из 'store.js'. Этот файл js имеет такой массив.

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

Я хочу, чтобы вставить новый набор значений в одном массиве

{идентификатор: '1', имя: 'пользователь 1'}

Вышеуказанные значения получаются из URL (vue-resource). Ниже приведен код для ввода полученных данных в массив. Тем не менее, данные не вставляя

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

Вы пытаетесь изменить vuex состояние от компонента вю, Вы не можете это сделать. Вы можете изменить только vuex магазина от mutation

Вы можете определить мутацию, как следующее:

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

Теперь вы можете совершить эту мутацию из ви, например, как следующий:

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