使多個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文件一起工作的最佳做法