vue组件前进状态缓存后退清除状态

// 思路：利用组件内的路由守卫（Leave：离开时触发）通过to.path或者from.path来判断是前进还是后退（只适用于某些筛选条件返回上一层时还保留原值，若页面输入框过多，还是使用keep-alive）
// 1前进： 把需要保存的状态存到vuex中，在进入页面时利用vuex存储的值重新赋值即可
// 2后退： 当返回到上一层时，将vuex中的状态初始化为默认值。
// 注意： 为避免赋值时变量为undefined，要存储的状态默认值必须和组件内的默认值相同

// vue3.0
onBeforeRouteLeave((to, form,next) => {
  // 前进
  if (form.path ==='/newsDetail' && to.path === '/newsDetailCallout') {
    // 存储到vuex中
    store.commit('setStatus', {selectVal: selectVal.value,newsStatus:newsStatus.value,inputV:inputVal.value})
    next()
  } else {
  // 后退
    if (to.path === '/work' && form.path === '/newsDetail') {
      // 初始化默认值
      store.commit('deleteStatus')
      next()
    }
  }
})
onMounted(()=>{
  inputVal.value = store.state.inputV
  newsStatus.value = store.state.newsStatus
  selectVal.value = store.state.selectVal
})

// 更优雅的解法。（pinia为例）
import { comDataStore } from '@/stores/comData'
const store = comDataStore()
const { currentTag } = toRefs(store) // 去pinia里面的默认值
const changeVal = (val) => {
  currentTag.value = val
  store.changeTag(val)  // 同步修改pinia里面的值，确保在路由返回后取到最新的值去更新数据
}


// stroes文件comData.js文件
import { defineStore } from 'pinia'
export const comDataStore = defineStore('comData', {
  state: () => ({
    currentTag: 'xxx',
  }),
  actions: {
    changeTag(tag: string) {
      this.currentTag = tag
    },
  },
  // 开启pinia持久化
  persist: true,
})