使多个Vuejs javascript文件一起工作的最佳做法

我无法在网上找到许多信息，并解释如何使用多个vuejs实例并使它们一起工作。使多个Vuejs javascript文件一起工作的最佳做法

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

我有一个主/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，使其协同工作：

来源

2017-09-09 aspirinemaga

你应该在'alarm.js'导出组件，以及组件加载到'App'组件（'从'./ alarm.js'''{el：'#app'，组件：'Alarm'，...}'）导入警报。你也可以使用'Vuex'来管理你的状态 – cl3m

@ cl3m - 但问题是，我应该如何将代码放入'alarms.js'文件中？与'app.js'相同的方式不起作用 – aspirinemaga

使用'vuex'并检查这个小提琴：https：//jsfiddle.net/n9jmu5v7/1269/（来自'vuex'文档：https：//vuex.vuejs。 org/en/getting-started.html） – cl3m

假设你使用的是捆绑等的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) 
    } 
    } 
})

然后小鬼ORT成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

来源

2017-09-09 20:57:13 cl3m

非常感谢，我会测试一下并给出我的反馈意见 – aspirinemaga

如果您有没有父子关系的两个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') 
    } 
})

来源

2017-09-09 23:43:30 exclsr

使多个Vuejs javascript文件一起工作的最佳做​​法

回答

相关问题

使多个Vuejs javascript文件一起工作的最佳做法