Блог

Я пытаюсь сделать так, чтобы v-treeview не терял своего состояния после перезагрузки страницы.

Я добился этого, и вы можете увидеть это здесь . Проверьте это, нажав на элементы, открыв его, а затем перезагрузите страницу. Вы увидите, что состояние меню сохранено. В этом примере, если вы откроете отладчик Chrome на вкладке консоль, вы увидите, что массив заполняется.

Однако, когда я пытаюсь внедрить его в свой проект, он ничего не возвращает, только пустой массив, и хранилище сеансов также пусто. Посмотрите здесь и здесь .

Это мой фрагмент кода в части шаблона:

  v-list.py-2(v-else, dense)
  v-treeview(v-model="tree", :items="treeData", @update:open="openIds", @update:active="activeIds", :open.sync="openEle", :active.sync="activeEle", item-key="name", activatable, 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}}
  

и часть сценария:

 data() {
return {
  openEle: [],
  activeEle: [],
  parentId: [],
  tree: [],
  currentMode: 'browse',
  staticData: [],
  treeData: [],
  currentParent:
    {
      id: 0,
      title: '/ (root)'
    },
  parents: [0],
  loadedCache: []
}
},
computed: {
  path: get('page/path'),
  locale: get('page/locale')
 },
 beforeCreate() {
  console.log("beforeCreated works")
 var openIds = sessionStorage.getItem('openIds');
 if (openIds) {
  this.openEle = JSON.parse(openIds);
  console.log(this.openEle)
 }
  var activeIds = sessionStorage.getItem('activeIds');
  if (activeIds) {
    this.activeEle = JSON.parse(activeIds);
    console.log(this.activeEle)
  }
 },
 async created(){
  console.log("created works")
  if (this.currentMode === 'browse') {
  // this.loadFromCurrentPath()
  await this.loadBrowseData()
  await this.buildTree(this.staticData)
  this.treeData = this.staticData
  }
  },
    methods: {
      openIds(items){
      console.log(items)
      sessionStorage.setItem('openIds', JSON.stringify(items));
      },
     activeIds(items){
      console.log(items)
      sessionStorage.setItem('activeIds', JSON.stringify(items));
     },
     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')
},
  

Я пытался поместить внутри разные хуки, такие как beforeCreate, созданные, но ничего не работает. Массив всегда пуст и хранилище сеанса тоже. Похоже, что в методах нет эффекта, но если вы посмотрите на пример в codepen, вы увидите, что это работает.

Что это может быть?