Push to vuex store array not working in VueJS

Question

I'm using Vuex to show a list of users from 'store.js'. That js file has array like this.

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

I want to insert a new set of values to the same array

{ id: '1', name: 'user 1',}

The above values are obtained from a URL (vue-resource). Below is the code to push the obtained data to the array. However, the data is not inserting

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

it works if you put like this? store.state.customers.push({data}) — Miguel, Jan 24 '17 at 14:34
@rogeriolino actually it should return entire array of users. But returning single user is also enough. I was trying both. None of them worked — Gijo Varghese, Jan 24 '17 at 16:32

score 60 · Accepted Answer · answered Jan 24 '17 at 14:44

60

You are trying to modify the vuex state from the vue component, You can not do it. You can only modify vuex store from a mutation

You can define a mutation like following:

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

Now you can commit this mutation from the vue instance, like following:

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

answered Jan 24 '17 at 14:44

Saurabh

71,488
40
181
244

1

that's not true. The value in a vuex store can be changed from Vue component. I've done that. For eg: "store.state.something = 1" will work – Gijo Varghese Jan 24 '17 at 16:27
21

@GijoVarghese The first line in [docs](https://vuex.vuejs.org/en/mutations.html) says: "The only way to actually change state in a Vuex store is by committing a mutation." – Saurabh Jan 25 '17 at 02:31
@GijoVarghese It might have worked, like [here](https://jsfiddle.net/s0joaxn7/), I myself wondering why it didn't threw error, But I'm sure It is not a recommended and correct way to do it. – Saurabh Jan 25 '17 at 06:22
1

Anyway thanks @Saurabh I figured it out finally. The syntax of json returned from the url from wrong. That was the error!!. It returned name instead of "name" – Gijo Varghese Jan 25 '17 at 07:35
17

@GijoVarghese the whole purpose of vuex is lost when you modify your stateful data directly within your vue component... – sjkm Sep 09 '17 at 12:57
6

It might work, but it comes under the category of "undefined behavior". Its a misuse of the framework, and you can expect it to stop working pretty much as soon as the devs realise that there might be a loophole, because the *correct* behavior is to throw an error and try and prevent it. – Shayne Nov 25 '17 at 15:31
1

Changing state outside of mutations is allowed when not in strict mode (https://vuex.vuejs.org/en/strict.html), it is still a very bad idea. – kursus Jan 23 '18 at 23:44
@Saurabh Maybe you can help me. Look at this : https://stackoverflow.com/questions/49685100/how-to-call-ajax-only-when-show-detail-on-vue-component – moses toh Apr 06 '18 at 06:27

Push to vuex store array not working in VueJS

1 Answers1

Linked