接上,
如何保持状态?
路由加载的组件,有两种情况,一个是会重新执行,一个是不会重新执行。
这个嘛,要看路由的编写情况,还要看路由的跳转情况。
tab标签切换的时候,一般会期待可以保存状态,这又分为两种情况,一个是我自己写的列表组件要如何保持状态,一个是正常的组件的保持状态。
先说自己的,由于列表组件的路由都是一个,通过 moduleID 的参数的变化来区分不同的模块。
这样本身就是保存状态,但是由于 moduleID 会变化,又需要重置,也就是说不能保持状态。
好像有点乱。
所以我做了一个 list-shell 组件。
路由先加载 这个 shell 组件,然后在shell里面判断有多少个动态的tab,然后加载对应的list组件。
shell组件是可以保持状态的,每个模块对应一个list组件,这样既可以区分,又可以加载不同的模块。
这样自己的事情就搞定了。
<template>
<!--列表的外壳-->
<div v-for="item in tabData.filter(a=>a.isList)" :key="item.id">
<nf_list
:moduleId="item.id"
v-show="item.id == tabState.activeId"
/>
</div>
</template>
// 增删改查
import { nextTick, reactive, ref } from 'vue'
// 状态
import VueDS from 'vue-data-state'
import nf_list from './list.vue'
// 访问状态
const { get } = VueDS.useStore()
// 获取 tab 的状态
const tabState = get.tabState()
// 获取tab的数据
const tabData = tabState.tabData
if (tabData.length === 1) {
tabState.activeId = tabData[0].id
}
然后就是正常的组件,这个听说 keep-alive 可以自动保持状态,但是试了一下,似乎不好用。还在研究。