Vue 2.0窗口关闭前更新Vuex及非父子组件Vuex通信问题排查

一、非父子组件通过Vuex通信及Target组件状态处理 #

1. 定义Vuex状态结构 #

先在Vuex store中定义存储Target组件状态的字段，包含是否打开、是否需要聚焦、组件实例引用（用于后续聚焦操作）：

// store/index.js
const state = {
  targetComponentState: {
    isOpened: false,
    needFocus: false,
    instance: null // 存储Target组件实例，方便调用聚焦方法
  }
}

const mutations = {
  UPDATE_TARGET_STATE(state, payload) {
    state.targetComponentState = { ...state.targetComponentState, ...payload }
  }
}

const actions = {
  updateTargetState({ commit }, payload) {
    commit('UPDATE_TARGET_STATE', payload)
  }
}

export default new Vuex.Store({ state, mutations, actions })

2. A组件打开Target时更新状态 #

A组件触发打开操作时，调用Vuex action更新状态：

<template>
  <button @click="openTargetFromA">从A打开Target</button>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['updateTargetState']),
    openTargetFromA() {
      // 这里配合你的组件展示逻辑（比如v-if/动态组件）打开Target
      this.updateTargetState({
        isOpened: true,
        needFocus: true
      })
    }
  }
}
</script>

3. Target组件绑定状态与聚焦逻辑 #

Target组件挂载后将自身实例存入Vuex，监听状态变化触发聚焦：

<template>
  <div ref="targetContainer" v-if="isOpened" tabindex="0">Target组件内容</div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      targetState: state => state.targetComponentState
    }),
    isOpened() {
      return this.targetState.isOpened
    }
  },
  mounted() {
    // 挂载后保存实例到Vuex
    this.updateTargetState({ instance: this })
    // 初始化时若需要聚焦则执行
    if (this.targetState.needFocus) {
      this.focusTarget()
    }
  },
  watch: {
    // 监听needFocus状态变化，触发聚焦
    'targetState.needFocus'(newVal) {
      if (newVal) {
        this.focusTarget()
      }
    }
  },
  methods: {
    ...mapActions(['updateTargetState']),
    focusTarget() {
      // 这里实现聚焦逻辑，比如让容器获取焦点或滚动到组件位置
      this.$refs.targetContainer.focus()
    }
  },
  beforeDestroy() {
    // 销毁前清除实例引用，避免内存泄漏
    this.updateTargetState({ instance: null })
  }
}
</script>

4. B组件打开Target时的状态判断 #

B组件触发打开操作时，先检查Vuex中的状态，决定是聚焦还是重新打开：

<template>
  <button @click="openTargetFromB">从B打开Target</button>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      targetState: state => state.targetComponentState
    })
  },
  methods: {
    ...mapActions(['updateTargetState']),
    openTargetFromB() {
      if (this.targetState.isOpened && this.targetState.instance) {
        // 已有状态，触发聚焦
        this.updateTargetState({ needFocus: true })
      } else {
        // 无状态，重新打开并标记需要聚焦
        this.updateTargetState({
          isOpened: true,
          needFocus: true
        })
      }
    }
  }
}
</script>

5. 生命周期钩子不生效的排查与解决 #

你遇到的钩子不生效问题，常见原因及解决：

• 若用v-show控制Target显示：组件不会销毁，beforeDestroy不会触发，改用watch监听isOpened状态，当变为false时处理状态。
• 若Target被keep-alive包裹：销毁时触发deactivated而非beforeDestroy，在deactivated钩子中清除实例或更新状态。
• 若为路由组件：beforeRouteLeave需在路由组件内部定义，确保路由配置正确，示例：

// Target路由组件内
export default {
  beforeRouteLeave(to, from, next) {
    this.updateTargetState({ isOpened: false, needFocus: false })
    next()
  }
}

二、Vue 2.0中网页窗口关闭前更新Vuex #

在项目入口文件（如main.js）中监听beforeunload事件，注意该事件仅支持同步操作，需用Vuex mutation直接更新状态：

// main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'

new Vue({
  store,
  render: h => h(App),
  mounted() {
    window.addEventListener('beforeunload', () => {
      // 同步更新Vuex状态
      this.$store.commit('UPDATE_TARGET_STATE', {
        isOpened: false,
        needFocus: false
      })
      // 若需要持久化，同步存入localStorage
      localStorage.setItem('targetState', JSON.stringify(this.$store.state.targetComponentState))
    })
  },
  beforeDestroy() {
    // 移除事件监听，避免内存泄漏
    window.removeEventListener('beforeunload')
  }
}).$mount('#app')

注意：beforeunload中异步操作大概率不会执行完成，因此必须用同步的mutation更新状态，不要用异步action。

内容的提问来源于stack exchange，提问作者Make a Smile