Vuex存储错误与两个不相关的组件

Question

我想了解并找到与多店（vuex）管理相关的最佳解决方案。

您能帮我提高我的水平吗？

我有2个组成部分（我们将在示例中说2个页面about_us和contact），当我在about_us页面上并且单击页面联系人时，我发现自己在页面contact上出现错误 / strong>，它涉及我未在联系页面中使用的页面about_us（page.article）的变量。在这两个页面上，我使用相同的商店“ web_pages”来恢复页面的内容。

您能帮我理解这里的代码吗？

错误显示为：TypeError：“ _ vm.page.article为空”

您能帮我理解这里的代码吗？

about.vue

<template>
<div class="page-content">
    {{ page.headline }}
    {{ page.article }}
</div>
</template>
<script>
    ... some code   
    computed: {
        ...mapState({
            page: state => state.pages.item
        })
    },
    async fetch({ params, store }) {
        const options = { slug: slug }
        await store.dispatch('pages/getOneBy', options)
    }
<script>

<api : http://127.0.0.1:8000/api/web_pages?slug=lagence>
    @id: "/api/web_pages/4"
    @type:  "http://schema.org/WebPage"
    lastReviewed:   "2019-05-08T00:00:00+02:00"
    headline:   "L'agence"
    article:    {...relationship to article entity => 1 result...}
</api>

contact.vue

    <template>
    <div class="page-content">
        {{ page.headline }}
    </div>
</template>

<script>
... some code   
    computed: {
        ...mapState({
            page: state => state.pages.item
        })
    },
    async fetch({ params, store }) {
        const options = { slug: slug }
        await store.dispatch('pages/getOneBy', options)
    }
<script>

<api : http://127.0.0.1:8000/api/web_pages?slug=contact>
    @id: "/api/web_pages/6"
    @type:  "http://schema.org/WebPage"
    lastReviewed:   "2019-05-08T00:00:00+02:00"
    headline:   "Contact"
    article:    null
</api>