Vuex getter JSON.stringify不起作用

Question

我在这里有以下Vuex商店：

const store = new Vuex.Store({
    state: {
        renderedBlocks: []
    },
    getters: {
        asString: (state) => () => {
            return JSON.stringify(state.renderedBlocks);
        },
        block: (state) => (k) => {
            return state.renderedBlocks[k];
        }
    },
    mutations: {
        updateBlock(state, data) {
            if (!state.renderedBlocks[data.id]) { return; }
            state.renderedBlocks[data.id].params = data.params;
            state.renderedBlocks[data.id].content = data.content;
        },
        updateBlockIndex(state, data) {
            var s = state.renderedBlocks[data.id];
            s.content[data.index] = data.value;
            state.renderedBlocks[data.id] = s;
        }
    }
});

此状态跟踪Wisiwyg编辑器中的所有“块”（例如标题，图像，段落等）。

为了在提交表单时发送所有这些信息，我需要将此数据传递给json并将其分配给隐藏的文本字段。根据Vue devtools的说法，商店可以正确更新，但是“ asString” getter不会更新JSON。

这是所有注册块（意味着在编辑器中可见）的所有组件的呈现：

<template>
    <div class="zg-content">
        <component v-for="(block, c) in $store.state.renderedBlocks" :is="block.component" :key="c"></component>
    </div>
</template>

这是输出发生的位置：

<template>
    <input type="hidden" :name="name" :value="asString">
</template>

<script>
export default {
    computed: {
        asString() {
            return this.$store.getters.asString();
        }
    }
};
</script>

这是可能发生一个块更新的地方：

<template>
    <ul ref="input">
        <li :key="key" v-on:keydown.enter="addElement(key, $event)" v-for="(point, key) in innerContent" contenteditable="true" v-html="point.content" @blur="updateContent(key, $event)"></li>
    </ul>
</template>

<script>
export default {

    props: {},

    computed: {
        params: {
            set(v) {},
            get() { return this.$store.getters.block(this.$vnode.key).params; }
        },
        innerContent: {
            set(v) {},
            get() { return this.$store.getters.block(this.$vnode.key).content; }
        }
    },

    methods: {
        addElement(index, event) {
            var self = this;
            event.preventDefault();

            this.innerContent.splice(index+1, 0, {content: ''});

            this.$store.commit('updateBlock', {
                id: this.$vnode.key,
                params: this.params,
                content: this.innerContent
            });
        },
        updateContent(key, event) {
            this.$store.commit('updateBlockIndex', {
                id: this.$vnode.key,
                index: key,
                value: {'content': event.target.innerHTML }
            });
        }
    }
};
</script>

因此，当我添加新元素或修改现有元素时，会触发'li'的模糊事件。我的状态已更新，这表示元素在商店中显示为{'content'：'NewContent'}。但是隐藏输入中的JSON仍然是旧的。

我发现，当我在列表组件内部创建所有列表元素的“私有”版本时，这将按预期工作。但这并不是真正的“ Vuex方式”，在严格模式下，我还会遇到很多错误。

Answer 1

从docs：