Question

我无法在网上找到很多关于如何使用多个vuejs实例并让它们协同工作的说明。

请有人告诉我他的代码风格如何做到这一点？

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

Vue.component('google-maps', require('./components/Gmaps.vue'));

export const App = window.App = new Vue({
    el: '#app',

    mounted(){

        // Listen for an event
        socket.on('alarm-channel:App\\Events\\AlarmCreated', ({data}) => {
            return this.alarmCreated(data.alarm);
        });

    },

    data: {
        users:  [],
        alarms: []                      // #01 - should be in Alarms.js
    },

    methods: {

        /* Newly registered alarm */
        alarmCreated(alarm){
            this.alarms.push(alarm);    // #01 - should be in Alarms.js 
        }
    }
});

如何在new Vue()内拨打同一个/resources/assets/js/alarms.js以使其协同工作？：

Answer 1

假设您使用的是捆绑包，例如webpack，并且能够使用ES6模块，我会在Vuex中创建一个alarm.js商店：

// 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)
    }
  }
})

然后将其导入app.js：

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)
      }
  }
});

我没有测试过这段代码，您可能需要调整一下以满足您的需求。

store的理想位置是store目录，其中index.js文件可以加载子模块。

你应该明确看看Vuex documentation

Answer 2

如果您有两个没有父子关系的Vue实例，则它们之间的一种通信方式是使用event-bus pattern。

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

vue-event-bus是一个结合了这两个想法的插件，它的用法如下：

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')
  }
})

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

2 个答案: