페이지 새로 고침 후 v-treeview 상태를 유지하는 방법

페이지 새로 고침 후 v-treeview 상태를 유지하는 방법

페이지 리프레시 후 트리뷰 상태를 유지하는 방법을 이해하려고 합니다.

예를 들어, 폴더 트리 보기가 있습니다.확장해야 할 폴더를 클릭합니다.

그런 다음 폴더 내의 항목을 클릭할 수 있습니다(페이지에 대한 링크이므로 페이지 전체가 새로 고쳐집니다.

문제는 트리 뷰가 폴더를 다시 닫고 이전 상태를 유지하지 못한다는 것입니다.

페이지 새로고침 후에도 트리뷰가 상태를 잃지 않도록 정적인 상태로 만들어야 합니다.

트리뷰

이 코드는 나의 트리뷰입니다.

 v-list.py-2(v-else, dense)
  v-treeview(v-model="tree", :items="treeData", activatable, :open.sync="openIds", @update:open="getOpenIds", item-key="name", open-on-click)
    template(v-slot:prepend="{item, open}")
      v-list-item(v-if="item.isFolder", link, :href='`/` + item.locale + `/` + item.path', :input-value='path === item.path')
        v-list-item-avatar(size="24", tile)
          v-icon  {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
        v-list-item-title {{item.title}}
      v-list-item.noFolders(v-else, :href='`/` + item.locale + `/` + item.path', :key='`childpage-` + item.id', :input-value='path === item.path')
        v-list-item-avatar(size="24", tile)
          v-icon mdi-text-box
        v-list-item-title {{item.title}}

또한 데이터는 역동적이라는 것을 언급해야 합니다.메서드를 사용하여 (개체로) 트리를 생성하고 있습니다.

async buildTree(items){
  this.$store.commit(`loadingStart`, 'browse-load')
  for(let item of items){
    if(item.isFolder){
      let result = await this.$apollo.query({
        query: gql`
          query ($parent: Int, $locale: String!) {
            pages {
              tree(parent: $parent, mode: ALL, locale: $locale) {
                id
                path
                title
                isFolder
                pageId
                parent
                locale
              }
            }
          }
        `,
        fetchPolicy: 'cache-first',
        variables: {
          parent: item.id,
          locale: this.locale
        }
      })
      item.children = _.get(result, 'data.pages.tree', [])
      for(let kid of item.children){
      if(item.isFolder){
          //kid.name = ""
          kid.children = []
        }
      }
    this.buildTree(item.children)
    console.log(this.treeData )
    }
  }
   this.$store.commit(`loadingStop`, 'browse-load')

이 방법으로 트리 상태를 로컬 스토리지에 저장할 수 있습니다.

getOpenIds(items){

   const memory = JSON.stringify(items)
    this.sessionIds = sessionStorage.setItem('items2', memory)
    this.openIds = JSON.parse(sessionStorage.getItem('items2'))
  console.log(this.openIds)
},

몇 가지 제안을 해봤지만, 어떤 이유에서인지 트리가 지역 창고에 반응하지 않습니다.그 방법이 비동기라는 사실과 관련이 있나요?

다음의 2개의 방법 중 하나를 사용할 수 있습니다(더 많은 방법이 있을 수 있습니다).

로컬 스토리지

localStorage를 사용하여 모든 폴더 상태를 기록할 수 있습니다.

그런 다음 계산된 속성을 추가하여 로컬 스토리지에서 데이터를 가져와 구성 요소 내부에 적용할 수 있습니다.

다음 번에는 예시와 함께 JSfiddle을 추가하면 다른 사용자가 자세한 솔루션을 제공할 수 있습니다.

사용 방법: 다른 사용자가 폴더를 클릭하면 v-on이 필요합니다.로컬 스토리지에 저장하는 핸들러 클릭 새 상태

function onClickHandler(folderName: string, isOpen: boolean) {
  localStorage.setItem(folderName, isOpen);
}

다음으로 로컬 스토리지에서 각 폴더의 상태를 가져와 적용합니다.폴더가 존재하지 않으면 false를 반환합니다.

function getFolderState(folderName: string) {
 localStorage.getItem(folderName);
}

v-list-item 요소에 적용하고 두 기능에 대해 동일한 폴더 이름을 전달해야 합니다.

Vue 동적 컴포넌트

Vue에는 구성 요소를 DOM에서 제거할 때 마운트 해제하지 않고 활성 상태를 유지하는 기본 제공 기능이 있습니다.

keep-alive 요소를 사용하여 컴포넌트를 랩할 수 있습니다.그러면 화면 전환 시 모든 구성 요소 상태가 유지됩니다.

<keep-alive>
  <your-component />
</keep-alive>

언급URL : https://stackoverflow.com/questions/64593337/how-to-keep-the-v-treeview-state-after-page-refresh