watcher 忽略 store 中的变化答案

【问题标题】：watcher ignores changes in the storewatcher 忽略 store 中的变化
【发布时间】：2018-08-08 18:39:12
【问题描述】：

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

我已经将分页重写为基于 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 并监听父组件，但观察者仍然对页面或行限制更改视而不见。

【问题讨论】：

您能否将您的商店也包含在内，这可能有助于查看其中的操作/突变
这很可能与您在突变中对商店进行突变的方式有关，请查看此页面：vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats 并尽量使您的商店保持平坦
用 store 模块更新了问题。 @nicolast 是的，它一定是相关的，我正在将旧状态与新对象合并，所以CHANGE_PER_PAGE 突变不会覆盖page。我不知道如何将其重新设计为更扁平的结构，因为我宁愿将每个模块的页面数据保留在一个商店中，而不是为每个模块商店复制页面更改操作。

标签： javascript vue.js vuex bootstrap-vue

【解决方案1】：

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

// 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);
    },
};

【讨论】：