vue 图扑 开发_【前端vue进阶实战】：从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 （二）...

接前面一，下面我们利用vuex实现顶部导航栏事件和右上角状态栏。

本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库，打造一个属于自己的在线绘图软件，最终效果：http://topology.le5le.com 。如果你觉得好，欢迎给文章和开源库点赞，让我们更有动力去做好！

本系列教程源码地址：Github

一、利用vuex进行消息通信，发送菜单命令

vue消息通信的方式很多，我们这里只讲vuex的方式。

1. 新建一个文件store/event.js

export const state = () => ({

event: {

name: '',

data: null

}

})

export const mutations = {

// 更新state的函数一

// 参数：state，上面的state

// 参数：event，新的数据

emit(state, event) {

state.event = event

}

}

这里，我们只用关注state和mutations即可，Nuxt.js会自动补全完整的vuex。store文件下的文件名event会自动转换为vuex的module：event。

其中，state是我们的全局数据保存状态；mutations是没有异步