Nuxt.js中使用混入实现跨组件类名切换失效如何解决？

问题原因 #

你当前用全局mixin定义的isActive属于每个组件实例独立的data属性，每个组件初始化时都会生成专属的isActive变量，互相之间没有关联，所以点击按钮只会修改当前组件内的状态，无法同步到其他组件。

解决方案 #

这里提供两种实现方案，都不需要修改你现有组件内的绑定逻辑：

方案1：轻量全局响应式状态（无需额外依赖） #

直接修改你的toggler插件代码即可：

import Vue from 'vue'

// 创建全局共享的响应式状态对象
const globalToggleState = Vue.observable({
  isActive: false
})

Vue.mixin({
  computed: {
    isActive() {
      // 所有组件统一读取全局状态
      return globalToggleState.isActive
    }
  },
  methods: {
    toggler() {
      // 修改全局状态，所有绑定的组件都会同步更新
      globalToggleState.isActive = !globalToggleState.isActive
    },
  },
})

方案2：使用Nuxt自带的Vuex状态管理（适合复杂度更高的项目） #

1. 在项目store目录下新建toggler.js文件，写入全局状态定义：

export const state = () => ({
  isActive: false
})

export const mutations = {
  toggleActive(state) {
    state.isActive = !state.isActive
  }
}

2. 修改你的toggler插件代码：

import Vue from 'vue'

Vue.mixin({
  computed: {
    isActive() {
      return this.$store.state.toggler.isActive
    }
  },
  methods: {
    toggler() {
      this.$store.commit('toggler/toggleActive')
    },
  },
})

修改完成后你原有组件内的:class="{'is-active': isActive}"绑定、@click.prevent="toggler"触发逻辑都可以直接沿用，所有组件的状态会自动同步。

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