0

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

我已经将分页重写为基于 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）更改时，我都希望收到通知，以便我可以使用正确的偏移量提取数据。但由于某种原因，观察者不起作用。

我试图将存储操作从 to 更改commit为dispatch并侦听父组件，但观察者仍然对页面或行限制更改视而不见。

4

1 回答 1

0

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

// 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);
    },
};
于 2018-03-01T10:25:51.710 回答