Question

我在项目中使用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没有被调用

Answer 1

您正在分派错误的操作。更改：

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

到

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

Vuex状态未更新，state.dispatch没有被调用

1 个答案: