페이지 헤더 구성 요소 - Vuex가 중첩된 하위 구성 요소의 저장소를 업데이트하도록 가져올 수 없습니다.

페이지 헤더 구성 요소 - Vuex가 중첩된 하위 구성 요소의 저장소를 업데이트하도록 가져올 수 없습니다.

Vue 앱을 사용하여 페이지 머리글 구성 요소를 생성하여 고급 보기 구성 요소(홈, 라이브러리, 강의실)로 가져옵니다.이들 각 '상위' 수준의 뷰에는 중첩된 '자녀 경로' 컴포넌트가 로드되는 라우터 뷰가 있습니다.로드되는 구성 요소와 일치하도록 페이지 머리글 구성 요소의 제목을 변경하려고 했습니다.조사를 해보니 당연히 필요한 기능을 얻기 위해 소품이나 슬롯을 사용할 수 없다는 것을 알게 되었습니다.루트 파라미터 또는 쿼리를 사용하여 작업을 수행할 수 있다는 것은 알지만, URL을 복잡하게 만드는 추가 정보는 원하지 않습니다.

Page Header 컴포넌트에 필요한 데이터를 저장하기 위해 Vuex를 사용하기로 했습니다.이는 어디서든 접근할 수 있는 중앙 집중식 데이터이기 때문입니다.제 해결책으로 저는 변이체라고 불리는created()페이지 중 하나가 로드될 때 페이지 제목 저장소 데이터를 업데이트하는 구성 요소의 후크.단, 이것은 첫 번째 부하에서는 정상적으로 동작합니다만, 기동하는 것은 1회 뿐입니다(created()페이지로 돌아가도 제목은 갱신되지 않습니다.

이 작업을 수행하려면 '$route'에서 변경 사항을 확인해야 합니까?어떤 도움이라도 주시면 감사하겠습니다.루트 변경으로 변환을 재기동하는 방법을 알 수 없습니다.

아래 코드:

페이지 리셋표시하다

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

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

    });

도서관.표시하다

    <template>

      <div>

        <page-header />

          <router-view></router-view>

      </div>

    </template> ....

library-feed.vue(라이브러리에 대한 기본 자식 경로)vue, router-view를 채웁니다).

    <template>
    ...
    </template>

    <script>

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

    </script>

https://codesandbox.io/s/page-title-from-store-bhw4h 에서 예를 재현했습니다.

에 대한 접근법created()후크가 코드 앤 박스에서 작동했어요경로 설정을 제공해주실 수 있나요?

다음과 같이 표시됩니다.

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

@moritzgvt 감사합니다.당신의 데모에서 완벽하게 작동하는 것을 보았습니다.네스트된 어린이 경로일 수도 있다고 생각했는데 코드와 상자를 편집했는데 그것도 작동했어요

그 때문에, 다시 돌아와 보니, App.vue의 메인 라우터 뷰 주위에 킵얼라이브 태그가 붙어 있는 것을 알 수 있었습니다.

여기서 알게 되었습니다(vuej에서 keep-alive를 사용하는 방법?).keep-alive 태그를 사용하면 다음과 같이 됩니다.

    <keep-alive>

       <router-view></router-view>

    </keep-alive>

라우터의 뷰를 메모리에 보존해, 스테이트와 created()나 mounted()등의 라이프 사이클 훅은 리셋 되지 않습니다.

그래서 태그를 제거하면 해결되었습니다!

언급URL : https://stackoverflow.com/questions/59822189/page-header-component-can-t-get-vuex-to-update-store-on-nested-child-component