0
votes

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

1
From where you are using pageCount computed property? - Sajib Khan
pageCount is being calculated using a prop products: Array - idk
Can you share the codes where pageCount is calculated? - Sajib Khan
@SajibKhan it's already there shared - idk
I meant, from where you are invoking pageCount computed property.. (from the template or else)? - Sajib Khan

1 Answers

0
votes

You are dispatching to the wrong action. Change:

store.dispatch("setinventoryPageNumber", this.pageNumber);

to

store.dispatch("patchinventoryPageNumber", this.pageNumber);