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>

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

1 个答案:

本地存储

Vue动态组件