Ошибка хранилища Vuex с двумя несвязанными компонентами - PullRequest
Новая
       15

Ошибка хранилища Vuex с двумя несвязанными компонентами

0 голосов
/ 08 мая 2019

Я хотел бы понять и найти лучшее решение проблемы, связанной с управлением несколькими магазинами (vuex).

Не могли бы вы помочь мне улучшить мой уровень в этом пункте?

У меня есть 2 компонента (скажем, 2 страницы about_us и контакт для примера), когда я нахожусь на странице about_us и, нажимая на страницу контакта, я обнаруживаю себя с ошибкой на странице контакта , которая касается переменной страницы about_us (page.article), которую я не использую на странице контактов. На 2 страницах я использую тот же магазин "web_pages", чтобы восстановить содержимое страниц.

Можете ли вы помочь мне понять вот код:

Отображается сообщение об ошибке: Ошибка типа: "_vm.page.article is null"

Можете ли вы помочь мне понять, вот код:

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>
...