vue中使用vuex去控制组件 显示隐藏，组件会被调多次并且还会窜，请教一下大佬们最好最优雅最合理的办法。

Question

页面文字描述：

1. Apage页面 点击详情按钮 把数据通过vuex带到 Details.vue;
2. Bpage页面 点击详情按钮 把数据通过vuex带到 Details.vue;
3. 由于是中大型项目，通用性的Details.vue组件的显示隐藏通过vuex里面details属性控制;
4. 现在会出现的问题：Details.vue会触发两次
   代码：(图标上传不了)
   1.vuex代码片段

 state: {
    current: {},
    currentSend: {},
    visible: {
      details:false,
    }
  },

 mutations: {
     [VISIBLE] (state, { type, visible }) {
      state.visible[type] = visible
     },
  }

 actions: {
   async onVisible ({ commit }, payload) {
      commit(VISIBLE, payload)
    },
  }

 

2. Apage

    <button @click="goDetail">按钮</button>
    <h1>A页面</h1>
    <Details v-if="visible.Apage" :Apage="true" :key="timer" />
   
     ...mapActions('goods', [
      'onVisible',
      'setCurrent',
      'setCurrentSend',
    ]),
   
     goDetail(row){
      this.setCurrent(row) //goDetail方法是再表格操作会拿到row
      this.timer = new Date().getTime()
      this.onVisible({ type: 'details', visible: true })
     }

   3.Bpage

   <button @click="goDetail">按钮</button>
    <h1>B页面</h1>
    <Details v-if="visible.Bpage" :Apage="false" :key="timer" />

 ...mapActions('goods', [
      'onVisible',
      'setCurrent',
      'setCurrentSend',
    ]),

  goDetail(row){
      this.setCurrent(row) //goDetail方法是再表格操作会拿到row
      this.timer = new Date().getTime()
      this.onVisible({ type: 'details', visible: true })
     }

4.Details.vue组件（简化，其实两个页面数据量很大，交互也多，通过pops Apage来控制显示Details.vue一些业务）

  <a-drawer
    width="40%"
    title="Basic Drawer"
    :placement="placement"
    :visible="visibleDrawer"
    @close="onClose"
   <h1 v-if="Apage">Apage</h1>
   <h1 v-else>Bpage</h1>
  </a-drawer>
   props: {
    Apage: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    ...mapState('goods', ['visible', 'current', 'currentSend']),
    visibleDrawer() {
      return this.visible.details;
    },
  },
   created() {
    console.log(this.visible.details);
    console.log('created@@@@@@@@Details组件');
  },

问题：
第一次点击Apage页面 detail组件 是正常显示 Apage，切换Bpage页面 显示detail组件逻辑 是正常显示 Bpage
第二次切换 Apage页面 detail组件 显示的是上一次 Bpage里面的东西，颠倒了。details 组件created 打印this.visible.details 会触发两次不同的结果
大概找到的问题是两个页面都用vuex里面的details去控制显示隐藏，点击的时候，其实是渲染了两次detail组件。

我最终是在vuex里面 加了控制A,B的不同页面

 visible: {
      Apage: false,
      Bpage: false,
      order: false,
      details:false,
    }

     Apage页面
     goDetail(row){
      this.setCurrent(row)
      this.timer = new Date().getTime()
      this.onVisible({ type: 'Apage', visible: true })
     }

   Bpage页面
     goDetail(row){
      this.setCurrent(row)
      this.timer = new Date().getTime()
      this.onVisible({ type: 'Bpage', visible: true })
     }

Details组件里面 修改了一下

  computed: {
    ...mapState('goods', ['visible', 'current', 'currentSend']),
    visibleDrawer() {
      return this.Apage ? this.visible.Apage : this.visible.Bpage;
    },
  },

我的实现还是不同页面使用vuex里面不同的控制参数去控制组件逻辑，请教一下大佬们最好最优雅最合理的其他办法(由于项目定性了，太多地方都是用vuex去控制的，所以最好还是用vuex方案)。

Answer 1

是不是用了keep-alive，界面跳转后老的组件没销毁=。=