页面刷新后如何保持 v-treeview 状态？

Question

我正在尝试了解如何在页面刷新后保持树视图的状态。

例如，我有一个文件夹树视图。我点击一个应该展开的文件夹。

之后，我可以点击文件夹内的那个项目（是一个页面的链接，因此整个页面都被刷新了。）

问题是树视图再次关闭文件夹并且不保持其先前的状态。

我需要它是静态的，因此即使在页面重新加载后树视图也不会丢失其状态。

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)
},

我已经尝试了这些建议，但由于某种原因，树对本地存储没有反应。方法是异步的这一事实是否与此有关？

Answer 1

您可以使用以下两种可能性之一（可能还有更多）：

本地存储

您可以使用localStorage 记录所有文件夹的状态。

然后您可以添加一个计算属性以从本地存储中获取数据（如果存在）并将其应用到您的组件中。

下次您可以在示例中添加JSfiddle，以便有人可以为您提供详细的解决方案:)

如何使用：当有人点击一个文件夹时，您应该有一个 v-on:click 处理程序，您可以在其中将新状态存储在本地存储中

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>