Nuxtjs 是 VUE SSR 的框架实现,有时会用到单独的事件处理,在 nuxtjs 可按以下方法处理:
添加 plugins/bus-inject.js 内容如下
import Vue from 'vue'
const bus = {}
bus.install = function (Vue) {
Vue.prototype.$bus = new Vue()
}
Vue.use(bus)
联合注入
如果需要在context中,Vue实例,甚至可能在Vuex store中,可以使用inject方法
Use inject nuxt function
import Vue from 'vue';
export default (ctx, inject) => {
const bus = new Vue;
inject('bus', bus);
};
在 nuxt.config.js 配置插件, 更多信息 https://nuxtjs.org/api/configuration-plugins
module.exports = {
'~/plugins/bus-inject.js',
//or use this for browser using only
{src:'~/plugins/bus-inject.js', ssr: false}
}
组件中触发事件
methods:{
eventhandler(){
this.$bus.$emit('name-of-event', 'your-data')
}
}
组件中接收事件
created () {
this.$bus.$on('name-of-event', (data) {
...
}
}
采用联合注入方法后
组件中的应用
export default {
mounted(){
this.$bus.$on('messageSent', e => console.log(e));
},
asyncData({app}){
//app.$bus available here also
}
}
Store 中应用
export const state = () => ({
messages: []
});
export const actions = {
async sendMessage({commit}){
const message = (await this.$axios.post('/message', {text: 'hello'})).data;
commit('pushMessage', message);
this.$bus.$emit('messageSent');
}
};
export const mutations = {
pushMessage(state, message) {
state.messages.push(message);
this.$bus.$emit('messagePushed', message);
}
}
网友评论