web-dev-qa-db-ja.com

VueJSで機能しないvuexストア配列へのプッシュ

Vuexを使用して、「store.js」のユーザーのリストを表示しています。そのjsファイルにはこのような配列があります。

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

同じ配列に新しい値のセットを挿入したい

{id： '1'、name： 'user 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',})
      });
    }
javascriptarraysvue.jsvuejs2vue-resource
12
Gijo Varghese

vueコンポーネントから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)
    }
  }
})

これで、次のように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'})
      });
    }
30
Saurabh