Компонент заголовка страницы - Не удается получить Vuex для обновления хранилища на вложенном дочернем компоненте. - PullRequest
Новая
       21

Компонент заголовка страницы - Не удается получить Vuex для обновления хранилища на вложенном дочернем компоненте.

2 голосов
/ 20 января 2020

У меня есть приложение Vue, в котором я создал компонент «Заголовок страницы», который перетаскивается в высокоуровневые компоненты представления (Дом, Библиотека, Классная комната). В каждом из этих представлений «более высокого» уровня у меня есть представление маршрутизатора, куда загружаются вложенные компоненты «дочернего маршрута». Я хотел изменить заголовок в компоненте Заголовок страницы, чтобы он соответствовал любому загружаемому компоненту. Естественно, после некоторых исследований я понял, что не могу использовать реквизит или слот для получения необходимой мне функциональности. Я знаю, что могу использовать параметры маршрута или запросы для выполнения работы, однако я не хочу, чтобы эта дополнительная информация загромождала URL.

Я решил использовать Vuex для хранения данных, необходимых для компонента Page Header, поскольку это были бы централизованные данные, к которым я мог получить доступ откуда угодно. Для моего решения я использовал вызванную мутацию на хуке created() компонента, чтобы обновить данные хранилища заголовков страниц при загрузке одной из страниц. Тем не менее, это прекрасно работает при начальной загрузке, но срабатывает только один раз (created()). Если я вернусь на страницу, заголовок не обновится.

Чтобы выполнить эту работу, нужно ли мне смотреть «$ route» на наличие изменений? Любая помощь будет оценена. Я не могу понять, как возобновить мутацию при изменении маршрута.

Код ниже:

заголовок страницы. vue

    <template>
        <div class="page-header">

           <h2>{{ getPageTitle }}</h2>

        </div>
    </template>

    <script>

        export default {
            name: 'pageHeader',
            computed: {
                getPageTitle(){
                    return this.$store.state.pageTitle;
                }
            }
        }

    </script>

store / store. js 

    export const store = new Vuex.Store ({
        state: {
            pageTitle: '',
        },
        mutations: {
            setPageTitle(state, payload) {
                state.pageTitle = payload.pageTitle;
            }
        }

    });

Library. vue

    <template>

      <div>

        <page-header />

          <router-view></router-view>

      </div>

    </template> ....

library-feed. vue (дочерний маршрут по умолчанию к Library. vue, который заполняет представление маршрутизатора) 

    <template>
    ...
    </template>

    <script>

        export default {
        name: 'libraryFeed',
        created() {
            this.$store.commit('setPageTitle', {pageTitle: 'Library'})
        },
    }

    </script>

Ответы [ 2 ]

1 голос
/ 21 января 2020

Спасибо @moritzgvt. Я видел, что это отлично работает на вашем демо. Я подозревал, что это могли быть вложенные дочерние маршруты , но я отредактировал ваши коды и поле, и это тоже сработало.

Из-за этого я вернулся и посмотрел и понял, что у меня есть keep-alive теги вокруг моего основного роутера в моем приложении. vue ....

Я узнал здесь ( Как использовать keep-alive в vuejs? ), использующих теги keep alive, например: 

    <keep-alive>

       <router-view></router-view>

    </keep-alive>

Поддерживает ли он представление маршрутизатора в памяти и состоянии, а также хуки жизненного цикла, такие как созданный () и смонтированный () не сбрасываются.

Поэтому удаление тегов решило проблему!

1 голос
/ 20 января 2020

Я воссоздал ваш пример здесь: https://codesandbox.io/s/page-title-from-store-bhw4h

Ваш подход с хуком created() сработал для меня на codesandbox. Не могли бы вы указать конфигурацию ваших маршрутов?

Это должно выглядеть примерно так: 

const routes = [
  { path: "/child", component: Child },
  { path: "/child2", component: Child2 }
];
...