Vue全局变量变更后组件未按需更新问题求助

你的问题核心是直接挂载在Vue.prototype上的普通变量不具备响应式特性，修改它的值不会触发组件的重新渲染，所以视图不会切换组件。下面提供两种可行的解决方式：

方式一：使用Vue.observable创建全局响应式状态（轻量方案） #

1. 在main.js中定义全局响应式对象：

// main.js
Vue.prototype.$globalState = Vue.observable({ val: 1 })

2. 组件模板中直接使用响应式状态（无需写this）：

<template v-if="$globalState.val === 1">
  <component1 />
</template>
<template v-else-if="$globalState.val === 2">
  <component2 />
</template>

3. 点击事件中修改值：

// 组件内的点击方法
changeVal() {
  this.$globalState.val = 2
}

方式二：使用Vuex管理全局状态（适合复杂场景） #

如果你的项目有较多全局状态需要管理，推荐用Vuex：

1. 安装并配置Vuex：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    val: 1
  },
  mutations: {
    SET_VAL(state, newValue) {
      state.val = newValue
    }
  }
})

2. 在main.js中引入store：

// main.js
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

3. 组件模板中使用状态：

<template v-if="$store.state.val === 1">
  <component1 />
</template>
<template v-else-if="$store.state.val === 2">
  <component2 />
</template>

4. 点击事件中通过mutation修改值：

// 组件内的点击方法
changeVal() {
  this.$store.commit('SET_VAL', 2)
}

另外注意：Vue模板中访问全局属性时不需要加this，你原来代码里的this.$val可以直接写成$val，不过这不是导致切换失败的核心原因。

内容的提问来源于stack exchange，提问作者learner