element 点击菜单生成tab选项切换数据丢失问题

Question

点击编辑进入详情页并用这一条的id请求数据，但是切换tab页的时候数据丢失，没有请求，应该如何修改，并且每次点编辑应该生成多个tab页

现在activeIndex这里存的是路径，如果生成多个tab页之后路径就重复了，多个重复的只能点击一个页面

watch: {
    $route(to) {
      console.log(to, 'to----------------------')
      let role = this.$store.state.tabs.role
      let showName = this.$store.state.tabs.showName
      let flag = false //判断是否页面中是否已经存在该路由下的tab页
      //options记录当前页面中已存在的tab页
      for (let option of this.options) {
        //用名称匹配，如果存在即将对应的tab页设置为active显示桌面前端
        if (option.name === showName) {
          flag = true
          this.$store.commit('set_active_index', to.path)
          break
        }
      }
      //如果不存在，则新增tab页，再将新增的tab页设置为active显示在桌面前端
      // if(role!='nopass'){}
      if (role == 'pass') {
        console.log(this.$store.state.tabs,'this.$store.state.tabs')
        if (!flag) {
          this.$store.commit('add_tabs', { route: to.path, name: showName })
          this.$store.commit('set_active_index', to.path)
          this.$store.commit('set_index', 1)
          
        }
      }
    },
  },

 computed: {
    options() {
      console.log(this.$store.state, 'this.$store.state.tabs')
      return this.$store.state.tabs.options
    },
    //动态设置及获取当前激活的tab页
    activeIndex: {
      get() {
        return this.$store.state.tabs.activeIndex
      },
      set(val) {
        console.log(val,'val----------')
        this.$store.commit('set_active_index', val)
      },
    },
  },

const tabs = {
  state: {
    options: [],
    activeTabItem: '',
    activeIndex:'',
    showName:'',
    role:'',
  },
  mutations: {
    // updateTabs(state,data){
    //     state.tabs = data
    // },
    add_tabs(state, data) {
      state.options.push(data)
    },
    // 删除tabs
    delete_tabs(state, route) {
      let index = 0
      for (let option of state.options) {
        if (option.route === route) {
          break
        }
        index++
      }
      state.options.splice(index, 1) //删除options里面下标为Index的一个数
    },
    // 设置当前激活的tab
    set_active_index(state, activeIndex,index) {
      state.activeIndex = activeIndex
    },
    //设置tab页显示标题
    set_showName(state, name) {
      state.showName = name
    },
    set_role(state, role) {
      state.role = role
    },
  },
}

export default tabs

Answer 1

讲道理这样是合理的。不过如果你真的要实现这样功能，可以换另一个字段当key呀，这样的话规则就可以自定义，比如说 uuid，或者你自己实现的 key。

至于你说的数据丢失，应该是被缓存了，或者没有重新刷新，一把你是 watch route，然后重载数据。

vue 的本质就是数据驱动视图，如果数据是正常的，那么就肯定能显示正确，如果数据都没有更新，那么就更新数据即可。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。