Laravel & Vue.js混入：如何让共享变量的新值全局生效？

问题的核心在于：你当前混入中的test是定义在组件的data选项里的，每个使用该混入的组件都会创建一份独立的test副本，所以修改只会影响当前组件。要实现全局共享，我们需要把状态从组件私有提升到全局共享的容器中，下面是几种可行的方案：

方案1：使用Vuex（官方推荐，适合中大型项目） #

Vuex是Vue官方的状态管理库，专门用来处理跨组件的状态共享。

步骤1：创建Vuex Store #

在resources/js目录下新建store.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    test: 'foo' // 把原来混入中的test移到这里作为全局状态
  },
  mutations: {
    // 定义修改状态的方法，必须是同步的
    UPDATE_TEST(state, value) {
      state.test = value
    }
  },
  actions: {
    // 如果需要异步操作，可以在这里定义，比如从接口获取数据后更新状态
    updateTest({ commit }, value) {
      commit('UPDATE_TEST', value)
    }
  },
  getters: {
    // 可以定义获取状态的计算属性，方便复用
    getTest: state => state.test
  }
})

步骤2：在Vue实例中挂载Store #

修改resources/js/app.js（或者你的入口文件）：

import Vue from 'vue'
import store from './store'
// 引入你的组件等...

new Vue({
  el: '#app',
  store, // 挂载store到Vue实例
  // 其他配置...
})

步骤3：修改你的混入文件mixins.js #

把原来的data和methods替换为Vuex的映射：

export default {
  computed: {
    test() {
      // 从store中获取全局状态
      return this.$store.getters.getTest
    }
  },
  methods: {
    changeTest(v) {
      // 通过action修改状态（如果不需要异步，也可以直接commit mutation）
      this.$store.dispatch('updateTest', v)
    }
  }
}

这样，任何组件调用changeTest修改状态后，所有使用该混入的组件都会同步更新test的值，因为它们都引用的是同一个全局状态。

方案2：使用全局事件总线（适合小型项目或简单场景） #

如果你的项目不需要复杂的状态管理，事件总线是个轻量的选择。

步骤1：创建全局事件总线 #

在resources/js/app.js中添加：

import Vue from 'vue'

// 创建一个全局的Vue实例作为事件总线
Vue.prototype.$bus = new Vue()
// 同时创建一个全局共享的响应式对象来存储状态
Vue.prototype.$sharedState = Vue.observable({
  test: 'foo'
})

步骤2：修改混入文件mixins.js #

export default {
  computed: {
    test: {
      get() {
        return this.$sharedState.test
      },
      set(value) {
        // 修改状态时，通过事件总线通知所有组件
        this.$sharedState.test = value
        this.$bus.$emit('test-updated', value)
      }
    }
  },
  methods: {
    changeTest(v) {
      this.test = v
    }
  },
  created() {
    // 监听状态更新事件，确保组件能同步最新值
    this.$bus.$on('test-updated', (value) => {
      this.$sharedState.test = value
    })
  },
  beforeDestroy() {
    // 组件销毁时移除监听，防止内存泄漏
    this.$bus.$off('test-updated')
  }
}

这种方式通过一个全局的响应式对象存储状态，结合事件总线通知所有组件更新，也能实现全局同步。

方案3：使用共享的响应式对象（极简方案） #

如果场景非常简单，甚至可以直接用一个单独的模块来存储响应式状态：

步骤1：创建共享状态模块resources/js/sharedState.js #

import Vue from 'vue'

// 创建一个响应式的对象
export const sharedState = Vue.observable({
  test: 'foo'
})

// 定义修改方法
export const updateTest = (value) => {
  sharedState.test = value
}

步骤2：修改混入文件mixins.js #

import { sharedState, updateTest } from './sharedState'

export default {
  computed: {
    test() {
      return sharedState.test
    }
  },
  methods: {
    changeTest(v) {
      updateTest(v)
    }
  }
}

这种方式最简洁，因为Vue.observable会让对象变成响应式的，所有引用它的组件都会自动更新。

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