RuoYi-Vue3实现动态路由同用同一个页面，切换页面时input输入框数据保存

前言:RuoYi-Vue3采用vite+element-Puls+Pinia框架进行开发

1.创建Pinia

　　1.保存先判断是否有数据,如果有则把以前的替换掉，如果没有就重新增加

　　2.type为若依tab右键后的操作,根据操作内传递过来的值进行判断数据是否保存

const useMyStore = defineStore(
  'my',
  {
    state: () => ({
      formData: []
    }),
    actions: {
　　　　setFormData(data) {
　　     let index = typeof this.setFormData == 'undefined' || this.setFormData == null ? -1 : this.formData.findIndex((item) => item.taskType == data.taskType)
    　　 index != -1 ? this.formData[index] = data : this.formData.push(data)
　　　　},
　　　　removeFromData(data, type) {
　　　　　　let copyFormData = this.formData
　　　　　　let newFormData = []

       　　 let flag = true

       　　 data.map(dataItem => {

         　　 let name = dataItem.name;

         　　 let taskType = name.replace(name[0], name[0].toLowerCase())

          　　let index = copyFormData.findIndex((item) => item.taskType == taskType)

         　　 switch (type) {

           　　 case 'refreshSelectedTag':

           　　 case 'closeAllTags':

           　　 case 'closeSelectedTag': {

              　　if (index != null && typeof index != undefined && index != -1) {

                　　copyFormData.splice(index, 1)

              　　}

              　　flag = true

            　　}

              　　break;

            　　case 'closeRightTags':

            　　case 'closeOthersTags':

            　　case 'closeLeftTags': {

              　　if (index != null && typeof index != undefined && index != -1) {

                　　newFormData.push(copyFormData[index])

              　　} 

              　　flag = false

            　　}

              　　break

          　　}

        　　})

        this.formData = flag ? copyFormData : newFormData

      }

　　})

export default useMyStore

2.保存数据

在需要保存数据的页面，在onUnmounted生命钩子中保存数据,使用nextTick是因为不仅仅在跳转页面时会调用关闭页面时也会调用该生命周期钩子,如此就会引发一个BUG:页面关闭了但是保存在Pinia中的数据还在,再次跳转回来时input框不会清空

onUnmounted(() => {

  nextTick(() => {

    let data = {

      id:router.name, // 用路由名字或其他能区分不同路由的数据作为标识，建议用路由中的数据

    　....

    };

    useMyStore().setFormData(data);

  });

});

 

3.读取数据

这个是赋值操作，页面切换后就会更新里面的数据,如果不需要则将filterData作用域全局作用域，在请求后台之后再进行赋值

watch(wsStore.formData,(newValue) => {
    let filterData =typeof newValue == "undefined" || newValue.length <= 0? []: newValue?.filter((item) => item.id == router.name);
   　赋值操作
  },
  {
    deep: true,
    immediate: true,
  }
);

以上保存了数据,但是关闭页面后再次打开,input框中的数据未归空

4.重置

　　1.找到src/layout/compoents/TagsView/index

　　2.添加代码

// view为路由对象/数组
function deleteFormData(view, type) {
   // 统一数组化 
  let datas = [];
  if (Array.isArray(view)) {
    datas = view;
  } else {
    datas.push(view);
  }
  let deleteData = [];
  datas.map((item) => {
     if (判断路由中是否有需要删除保存数据的页面,也可以用swite穿透实现) {
      deleteData.push(item);
    }
  });
  useMyStore().removeFromData(deleteData, type);
}

 　　3.调用位置 refreshSelectedTag,closeSelectedTag，closeRightTags,closeLeftTags,deleteFormData,closeOthersTags等方法调用,传值为方法中传来的形参,如果没有形参则传值then返回的

visitedViews实在没有值则传visitedViews.value