观察者忽略了商店的变化

Question

我有一个组件用于在表中显示分页元素。

我已经改写了基于Vuex的分页（之前它使用的是事件总线）并且它几乎可以工作 - 值被保存到商店，但我的观察者无法赶上变化。

<template>
    <div>
        <input-number
            class="data-table__pagination__form-group"
            :min="min"
            :max="maxPerPage"
            :step="step"
            :label="messages.inputNumber__label"
            v-model.number="perPageComputed"
        />
        <b-pagination
            class="data-table__pagination__list"
            v-model="currentPageComputed"
            :total-rows="totalRows"
            :per-page="perPageComputed"
            :limit="1"
        />
    </div>
</template>

<script>
import bPagination from 'bootstrap-vue/es/components/pagination/pagination';
import InputNumber from '@/components/forms/InputNumber';

export default {
    name: 'DataTablePagination',

    components: { InputNumber },

    extends: bPagination,

    props: {
        module: {
            type: String,
            required: true,
        },
    },

    data () {
        return {
            min: 5,
            step: 5,
            messages: {
                inputNumber__label: 'Rows per page:',
            },
        };
    },

    computed: {
        maxPerPage () {
            return Math.min(100, this.totalRows);
        },
        currentPageComputed: {
            get: function () {
                return this.$store.getters.page(this.module);
            },
            set: function (newValue) {
                this.$store.commit('CHANGE_PAGE', {key: this.module, value: {page: newValue}});
            },
        },
        perPageComputed:     {
            get: function () {
                return this.$store.getters.perPage(this.module);
            },
            set: function (newValue) {
                this.$store.commit('CHANGE_PER_PAGE', {key: this.module, value: {perPage: newValue}});
            },
        },
    },

    watch: {
        currentPageComputed (value) {
            console.log('watching currentPageComputed', value); // never appears
        },
        perPageComputed (value) {
            console.log('watching perPageComputed', value); // never appears
        },
    },
};
</script>

我有这样的商店结构：

{
    (...),
    list: {
        someModuleName: {
            page:    1,
            perPage: 10
        }
    }
}

商店模块：

import * as types from '@/store/types';

// initial state
const state = {
    banners: {},
};

// getters
const getters = {
    page (state) {
        return module => (state[module].page : 1);
    },
    perPage (state) {
        return module => (state[module].perPage : 10);
    },
};  

// mutations
const mutations = {
    [types.CHANGE_PAGE] (state, {key, value}) {
        state[key] = Object.assign(state[key], value);
    },
    [types.CHANGE_PER_PAGE] (state, {key, value}) {
        state[key] = Object.assign(state[key], value);
    },
};

export default {
    state,
    getters,
    mutations,
};

因此，无论何时当前页面或行限制（perPage）发生更改，我都希望得到通知，以便我可以使用正确的偏移量来提取数据。但由于某些原因，观察者不起作用。

我尝试将存储操作从commit更改为dispatch并监听父组件，但观察者仍然在页面或行限制更改时仍然是盲目的。

Answer 1

我想到了。我需要在改变状态时创建一个新的Object：

// mutations
const mutations = {
    [types.CHANGE_PAGE] (state, {key, value}) {
        state[key] = Object.assign({}, state[key], value);
    },
    [types.CHANGE_PER_PAGE] (state, {key, value}) {
        state[key] = Object.assign({}, state[key], value);
    },
};