[Vuejs]-Vue-js and Vuex: View not being updated

by

0👍

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>
👤kevguy

Leave a comment