使多个Vuejs javascript文件协同工作的最佳实践

我在网上找不到关于如何使用多个vuejs实例并使它们协同工作的详细说明

请问，有人能告诉我他的代码风格如何做到这一点吗

我有一个main/resources/assets/js/app.js：

---

如何在/resources/assets/js/alarms.js中调用相同的新Vue使其协同工作？：

假设您使用的是webpack之类的捆绑程序，并且能够使用ES6模块，我会在alarm.js中创建Vuex存储：

然后将其导入app.js：

我还没有测试这段代码，您可能需要对它进行一些调整以满足您的需要

存储区的理想位置是存储区目录，其中有一个index.js文件来加载子模块

---

如果有两个没有父子关系的Vue实例，则它们之间通信的一种方法是使用

可以使用共享此事件总线，这是在整个Vue应用程序中共享状态的另一种方式

是一个结合了这两种思想的插件，其使用方式如下：

var VueEventBus = require('vue-event-bus')
Vue.use(VueEventBus)

new Vue({
  created: function () {
    this.$bus.$on('event', function () { console.log('event is received.') })
  }
})

new Vue({
  created: function () {
    this.$bus.$emit('event')
  }
})

---

您应该在alarm.js中导出一个组件，并将该组件加载到App component import alarm from./alarm.js'{el:'App'，components:'alarm'，…}中。您还可以使用Vuex来管理您的state@cl3m-但问题是，我应该如何将代码放入alarms.js文件中？与app.js不起作用的方式相同使用vuex并检查此提琴：来自vuex文档：非常感谢，我将测试它并给出我的反馈

// npm install vuex
import Vuex from 'Vuex'

export const store = new Vuex.Store({
  state: {
    users: [],
    alarms: []
  },
  mutations: {
    addAlarm(state, alarm) {
      state.products.push(alarm)
    }
  },
  getters: {
    alarms: state => state.alarms,
    users: state => state.users
  },
  actions: {
    addAlarm: ({ commit }, alarm) => {
      commit('addAlarm', obj)
    }
  }
})

import Vuex from 'Vuex'
import { store } from './alarm.js'

Vue.use(Vuex)

new Vue({
  el: '#app',
  mounted() {
    // Listen for an event
    socket.on('alarm-channel:App\\Events\\AlarmCreated', ({
      data
    }) => {
      return this.alarmCreated(data.alarm);
    });
  },
  computed: {
    ...Vuex.mapGetters({
      alarms: 'alarms',
      users: 'users'
    })
    // or maybe?
    // alarms: _ => store.alarms
  },
  methods: {
    ...Vuex.mapActions({
        addAlarm: 'addAlarm'
      }),
      alarmCreated(alarm) {
        this.addAlarm(alarm)
      }
  }
});

var VueEventBus = require('vue-event-bus')
Vue.use(VueEventBus)

new Vue({
  created: function () {
    this.$bus.$on('event', function () { console.log('event is received.') })
  }
})

new Vue({
  created: function () {
    this.$bus.$emit('event')
  }
})