nextTick在onMounted里面的坑

强烈建议nextTick在setup语法糖的普通位置或者在onMouted里面不行直接setTimeout， 下面都不用看了

锚点定位的例子

在一个页面可以直接锚点定位，例如

	// 锚点定位，在普通函数里面调用没有问题
  const anchor = document.querySelector('.step-2').offsetTop
  console.log('anchor1', anchor)
  window.scroll({ top: anchor, left: 0, behavior: 'smooth' })
  

但是需求，对某个 Application.vue页面中点击某处实现跳转到toolkit.vue路由页面（再滑动某个元素位置），并且滑动页面到所在的指定位置（后续可以对那个列表的样式高亮）。

<div class="bottom">
  <ul>
    <li v-for="(tool, index1) in item.data" :key="index1">
      <a href="/#/toolkit" @click="funcClick(tool.id)">{{ tool.name }}a>
    li>
  ul>
div>
<script>
import { useToolkitStore } from '@/store/toolkit'
const toolStore = useToolkitStore()
function funcClick(value) {
  // 使用 组件传值
  console.log('value', value)
  toolStore.toolSelectId = value // 本来之前想用project 和 inject 感觉还是直接用状态管理库吧
  console.log('toolStore', toolStore.toolSelectId)

}

script>

List.vue中

<template>
属于动态渲染的列表...
</template>


import { useToolkitStore } from '@/store/toolkit'
const toolStore = useToolkitStore()
const tooId = ref(toolStore.toolSelectId)

onMounted(() => {
  nextTick(() =>{
  	let anchor = document.querySelectAll() // 以为nextTick里面能拿到DOM？大错特错了,还是undeined，只有外面通过ref拿或者setTimeout再拿
    console.log(document.documentElement.clientHeight) // 这个倒是可以拿到
	// 老天爷，下面两种控制台都可以滚动，但是这个滚动一直没效果
    // window.scroll({ top: 800, left: 0, behavior: 'smooth' }) 
    // window.scrollTo(0,500)
    console.log('tooId.value',tooId.value)
  })
 
})

setTimeout(() => {
  if([4,5,6].includes(tooId.value)) {
    console.log('Yes1!!!')
    console.log('window', window)
    window.scroll({ top: 150, left: 0, behavior: 'smooth' })
  }
  toolStore.$patch({toolSelectId: 0}) // 重置仓库的这个id！！很重要  
}, 800)

store/toolkit.js中（pinia)

import { defineStore } from 'pinia'

export const useToolkitStore = defineStore('Toolkit', {
  state: () => {
    return {
      toolSelectId: ''
    }
  },
  getters: {
  },
  actions: {},
  mutations: {
  },
  //存在localStorage
  persist: {
    enabled: true, //开启
    storage: sessionStorage //修改存储位置
    // key:'userInfo',	//设置存储的key
    // paths: ['id'],//指定要长久化的字段
  }
})