VueJ에서 작동하지 않는 Vuex 저장소 어레이에 푸시s

VueJ에서 작동하지 않는 Vuex 저장소 어레이에 푸시s

Vuex를 사용하여 'store.js' 사용자 목록을 표시하고 있습니다.그 js 파일에는 다음과 같은 배열이 있습니다.

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

동일한 배열에 새 값 집합을 삽입하고 싶다.

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

vue 구성 요소에서 vuex 상태를 수정하려고 합니다. 수정할 수 없습니다.변환에서만 vuex 저장소를 수정할 수 있습니다.

다음과 같이 변환을 정의할 수 있습니다.

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

이제 다음과 같이 vue 인스턴스에서 이 변환을 커밋할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/41830731/push-to-vuex-store-array-not-working-in-vuejs