Vue全局变量$index不递增问题：动态设置弹窗zIndex求解

问题根源 #

你遇到的核心问题是：Vue.prototype.$index = 1 是挂载在Vue原型上的属性，但当你在组件里执行 this.$index = this.$index + 1 时，会给当前组件实例添加一个属于自己的$index属性，这个实例属性会覆盖原型上的全局属性。也就是说，每个按钮所在的组件实例都有自己独立的$index变量，点击不同按钮时，用的是各自实例的变量，自然不会共享递增。

解决方案 #

下面给你几种可行的方案，从简单到规范，按需选择：

方案1：使用独立的全局状态模块（适合小型项目）

这种方式不需要引入Vuex，用一个单独的JS文件来维护共享状态：

1. 创建全局状态文件（比如src/utils/globalZIndex.js）：

// 维护共享的zIndex状态
export default {
  currentIndex: 1,
  getNextIndex() {
    // 返回当前值后再递增，确保每次弹窗拿到的是唯一层级
    return this.currentIndex++
  }
}

2. 在main.js中导入并挂载到Vue原型：

import globalZIndex from './utils/globalZIndex.js'
Vue.prototype.$zIndex = globalZIndex

3. 修改组件中的open方法：

open(folder) {
  const doc = document.getElementById(folder)
  // 获取全局的下一个层级值
  const nextZIndex = this.$zIndex.getNextIndex()
  doc.style.zIndex = nextZIndex
  
  const tab = document.getElementById('tabs' + folder)
  doc.style.display = "block"
  tab.style.display = "inline-block"
  this.$props.file.active(true)
  
  console.log('当前全局层级:', this.$zIndex.currentIndex)
}

方案2：使用Vuex管理全局状态（适合中大型项目）

如果你的项目已经在用Vuex，这是更规范的方式：

1. 在Vuex的store中添加状态和mutation：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    zIndex: 1
  },
  mutations: {
    // 定义递增层级的mutation
    INCREMENT_ZINDEX(state) {
      state.zIndex++
    }
  },
  actions: {},
  modules: {}
})

2. 修改组件中的open方法：

open(folder) {
  const doc = document.getElementById(folder)
  // 直接使用store中的当前层级
  doc.style.zIndex = this.$store.state.zIndex
  
  const tab = document.getElementById('tabs' + folder)
  doc.style.display = "block"
  tab.style.display = "inline-block"
  this.$props.file.active(true)
  
  // 提交mutation递增层级
  this.$store.commit('INCREMENT_ZINDEX')
  console.log('当前全局层级:', this.$store.state.zIndex)
}

方案3：临时方案（不推荐，仅用于快速测试）

如果只是临时测试，可以直接用window对象存储全局变量（不推荐在正式项目中使用，容易造成全局污染）：

1. 在main.js中定义：

window.globalZIndex = 1

2. 修改组件的open方法：

open(folder) {
  const doc = document.getElementById(folder)
  doc.style.zIndex = window.globalZIndex
  
  const tab = document.getElementById('tabs' + folder)
  doc.style.display = "block"
  tab.style.display = "inline-block"
  this.$props.file.active(true)
  
  window.globalZIndex++
  console.log('当前全局层级:', window.globalZIndex)
}

验证效果 #

现在不管你点击哪个按钮，都会共享同一个全局层级变量，每次点击都会递增，新弹窗的zIndex会比之前的大，实现你想要的层级覆盖效果。

内容的提问来源于stack exchange，提问作者Jonas Tamoševičius