Vue-js and Vuex: View not being updated

Question

I am using Vuejs and Vuex to play around with. Currently i have an issue updating the view (vuejs) after an AJAX call has been fired. The view should update but it does not work if i use arrays, objects and booleans. If i update a string via the store commit this will get updated properly in the view. I do see in the vue develop tool the vuex / store getting updated properly. Once i make a change to the part of example.vue hot reloading kicks in and the data is being shown.

I think i really mis a small thing but cannot figure out what is needed to trigger the update.

Currently i have set this up using the vue-cli tool and added Axios and Vuex via npm.

This is my code: store.js

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export const StoreExample = new Vuex.Store({
    state: {
        customers: [],
        isLoading: false,
    },

    getters: {
        getCustomers: state => state.customers,
        isLoading: state => state.isLoading,
    },

    mutations: {
        setCustomers(state, payload) {
            state.customers.push(payload)
        },

        setLoading(state, payload) {
            state.isLoading = payload
        }
    },

    actions: {
        fetchCustomers({state, commit}) {
            commit('setLoading', true)
            axios.get('https://api.myjson.com/bins/rkyih')
            .then(response => {
                commit('setCustomers', response.data)
                commit('setLoading', false)
            })
            .catch(e => {
                console.error(e)
                commit('setLoading', false)
            })
        }
    },

    strict: process.env.NODE_ENV !== 'production'
})

main.js

import Vue from 'vue'
import Vuex from 'vuex'
import { StoreExample } from './store/store.js'
import App from './App'

Vue.use(Vuex)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store: StoreExample,
  components: { App },
  template: '<App/>'
})

example.vue

<template>
    <div>
        {{isLoading}}
        {{getCustomers}}
    </div>

</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'example',

        created() {
            this.$store.dispatch('fetchCustomers')
        },

        computed: {
            ...mapGetters([
                'getCustomers',
                'isLoading'
            ])
        }
    }
</script>

App.vue

<template>
  <div id="app">
    <example/>
  </div>
</template>

<script>
import example from './components/example'

export default {
  name: 'App',

  components: {
    example
  }
}
</script>

Answer 1

I can't seem to replicate your problem, however, I made use of your code and created a fully working example, which is basically 90% of your code.

In this example:

• I verified there's no difference between using getters or accessing the state directly.
• I also verified your problem has nothing to do with array.push(), as Vue's already wrapped around Array.push() to trigger updates.
• Instead of using axios, I used fetch for simplicity, which should work the same.

 const store = new Vuex.Store({ state: { customers: [], isLoading: false, }, getters: { gCustomers: state => state.customers, gIsLoading: state => state.isLoading, }, mutations: { setCustomers(state, payload) { state.customers = payload }, setLoading(state, payload) { state.isLoading = payload }, addCustomer(state, payload) { state.customers.push(payload) }, resetCustomers(state) { state.customers = []; } }, actions: { fetchCustomers({ state, commit }) { return fetch('https://api.myjson.com/bins/rkyih') .then(res => res.json()) .then(response => { commit('setCustomers', response) commit('setLoading', false) }) .catch(e => { console.error(e) commit('setLoading', false) }); } }, }); const app = new Vue({ store, el: '#app', data: { dataId: '', isActive: '', age: '', firstName: '', lastName: '' }, computed: { ...Vuex.mapGetters([ 'gIsLoading', 'gCustomers' ]), ...Vuex.mapState([ 'customers', 'isLoading' ]) }, methods: { ...Vuex.mapActions({ getData: 'fetchCustomers' }), ...Vuex.mapMutations({ resetData: 'resetCustomers' }), addCustomer() { this.$store.commit('addCustomer', { id: this.dataId, isActive: this.isActive, age: this.age, first_name: this.firstName, last_name: this.lastName, }); this.resetInputs(); }, resetInputs() { this.dataId = '' this.isActive = '' this.age = '' this.firstName = '' this.lastName = '' } } }); 

 .container { display: flex; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> <div id="app"> <button v-on:click="getData()">Get Data from API</button> <button v-on:click="resetData()">Reset Data</button> <div> <div>Id: <input v-model="dataId"/></div> <div>isActive: <input v-model="isActive" type="checkbox"/></div> <div>Age: <input v-model="age"/></div> <div>First Name: <input v-model="firstName"/></div> <div>Last Name: <input v-model="lastName"/></div> <div><button v-on:click="addCustomer()">Add Data</button></div> </div> <div class="container"> <div class="column"> <h3>mapState</h3> <div>Loading? {{isLoading}}</div> <ul> <li v-for="customer in customers"> {{customer}} </li> </ul> </div> <div class="columns"> <h3>magGetters</h3> <div>Loading? {{gIsLoading}}</div> <ul> <li v-for="customer in gCustomers"> {{customer}} </li> </ul> </div> </div> </div>