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>
- [Vuejs]-Cannot use my compiled single file component
- [Vuejs]-Eslint fix command is not fixing all of the vue/html-indent errors
Source:stackexchange.com