I am using Vue and a Vuex store in a project.
Here's the Vuex store
export default new Vuex.Store({
state: {
inventoryPageNumber: 0,
inventoryPageCount: 0,
},
getters: {
getinventoryPageNumber: state => {
return state.inventoryPageNumber;
},
getinventoryPageCount: state => {
return state.inventoryPageCount;
}
},
mutations: {
setinventoryPageNumber(state, pagenumber) {
state.inventoryPageNumber = pagenumber
},
setinventoryPageCount(state, pagecount) {
state.inventoryPageCount = pagecount
}
},
actions: {
patchinventoryPageNumber(context, pagenumber) {
context.commit('setinventoryPageNumber', pagenumber)
},
patchinventoryPageCount(context, pagecount) {
context.commit('setinventoryPageCount', pagecount)
},
}
})
And this is where it is being used in component:
**Tempalate**
<button class="fa fa-backward fa-xs text-white button-trans" @click="firstPage" :disabled="pageNumber==0" aria-hidden="true"></button>
<span class="text-white pl-2 pr-2">Page {{pageNumber+1}} of {{pageCount}}</span>
**Script**
computed:{
pageCount: {
get() {
let count = Math.ceil(this.products.length / this.size);
return count;
},
set(newValue) {
store.dispatch("patchinventoryPageCount", newValue);
}
}
},
methods: {
firstPage() {
this.pageNumber = 0;
store.dispatch("setinventoryPageNumber", this.pageNumber);
}
}
Expected
PageCount to be updated as calculation being done and Page Number to update on click
Actual
Local computed property gets updated, state doesn't
store.dispatch is not being called
pageCount
computed property? - Sajib KhanpageCount
is calculated? - Sajib KhanpageCount
computed property.. (from the template or else)? - Sajib Khan