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

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

如何在 /resources/assets/js/alarms.js 中调用相同的 new Vue() 使其协同工作？:

Answer 1

假设您使用的是 webpack 等捆绑程序，并且能够使用 ES6 模块，我将在 alarm.js 中创建一个 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)
    }
  }
})

然后将其导入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