Я использую Vue и магазин Vuex в проекте.
Вот магазин Vuex
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)
},
}
})
И вот где он используется в компоненте :
**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);
}
}
Ожидается
PageCount будет обновляться по мере выполнения расчета и номер страницы для обновления при нажатии
Фактический
Обновляется локальное вычисляемое свойство, состояние не
store.dispatch не вызывается