接前面一，下面咱們利用vuex實現頂部導航欄事件和右上角狀態欄。vue
本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 開源js繪圖庫，打造一個屬於本身的在線繪圖軟件，最終效果：http://topology.le5le.com 。若是你以爲好，歡迎給文章和開源庫點贊，讓咱們更有動力去作好！node
本系列教程源碼地址：Githubgit
1、利用vuex進行消息通訊，發送菜單命令
vue消息通訊的方式不少，咱們這裏只講vuex的方式。github
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。vuex
其中，state是咱們的全局數據保存狀態；mutations是沒有異步的更新數據的方法集合；actions是異步更新數據的方法集合（這裏暫時沒有）。json
2. 在頂部導航菜單事件裏，更新數據
layouts/default.vue的菜單響應事件：canvas
methods: {
onMenu(key, keyPath) {
if (!key || key.indexOf('/') === 0) {
return
}
switch (key) {
case 'about':
case 'about2':
this.about = true
break
case 'license':
this.license = true
break
case 'joinin':
this.joinin = true
break
default:
this.$store.commit('event/emit', {
name: key
})
break
}
}
}
其中，經過this.$store.commit去發送無異步狀態的更新store數據請求。'event/emit' 中的event指store的module：event(.js)；emit指mutations或actions中的函數名。由於這裏是經過commit方式去更新數據，因此對應的是mutations中的emit函數。commit的第二個參數，是咱們要更新的最新數據。服務器
3.在pages/index.vue監聽消息事件
當咱們更新store數據後，各個頁面數據會自動更新。咱們這裏經過watch的方式去監聽消息：微信
computed: {
event() {
return this.$store.state.event.event
}
},
watch: {
event(curVal) {
if (this['handle_' + curVal.name]) {
this['handle_' + curVal.name](curVal.data)
}
}
}
首先，咱們經過動態的屬性計算computed來設置一個動態屬性event，而後經過watch監聽event的變化，即完成了消息監聽。異步
不一樣的菜單事件對應的畫布操做，參考畫布的API文檔
2、利用vuex，實現右上角狀態欄
1. 新建一個文件store/canvas.js，保存全局畫布狀態
export const state = () => ({
data: {
scale: 1,
lineName: 'curve',
fromArrowType: '',
toArrowType: 'triangleSolid',
locked: 0
}
})
export const mutations = {
data(state, data) {
state.data = data
}
}
2. 在onMessage（畫布消息返回函數）監聽狀態變化，更新數據
onMessage(event, data) {
switch (event) {
case 'node':
case 'addNode':
this.props = {
node: data,
line: null,
multi: false
}
break
case 'line':
case 'addLine':
this.props = {
node: null,
line: data,
multi: false
}
break
case 'multi':
this.props = {
node: null,
line: null,
multi: true
}
break
case 'space':
this.props = {
node: null,
line: null,
multi: false
}
break
case 'moveOut':
break
case 'moveNodes':
case 'resizeNodes':
if (data.length > 1) {
this.props = {
node: null,
line: null,
multi: true
}
} else {
this.props = {
node: data[0],
line: null,
multi: false
}
}
break
case 'resize':
case 'scale':
case 'locked':
if (this.canvas && this.canvas.data) {
this.$store.commit('canvas/data', {
scale: this.canvas.data.scale || 1,
lineName: this.canvas.data.lineName,
fromArrowType: this.canvas.data.fromArrowType,
toArrowType: this.canvas.data.toArrowType,
fromArrowlockedType: this.canvas.data.locked
})
}
break
}
}
canvas.data數據不少，這裏咱們只關注幾個全局狀態屬性。也是由於vuex的緣由，不能直接傳入原始json對象this.$store.commit('canvas/data', this.canvas.data)，會報錯。
3. 在layouts/default.vue狀態欄顯示數據
[這裏只實現了部分]咱們經過computed動態屬性來暴露給ui顯示：
computed: {
scale() {
return Math.floor(this.$store.state.canvas.data.scale * 100)
},
lineName() {
const lineNames = {
curve: '曲線',
polyline: '折線',
line: '直線'
}
return lineNames[this.$store.state.canvas.data.lineName]
}
}
4. 右上角狀態欄下拉選項，經過前面消息事件通訊，修改畫布狀態
如圖，經過相同的菜單消息更新畫布狀態。
3、其餘
至此，頂部導航菜單和簡單的狀態欄就完成了，後續功能完善待續。
但，但，但...完整狀態欄還沒完成，但願你們根據開發文檔去參與完善，展現本身舞臺的機會到了，可加入貢獻者名單哦！不清楚的，歡迎聯繫管理員：（微信）alsmile123，或加羣：
如何貢獻
經過GitHub的pr方式： 0. 閱讀開發文檔，瞭解相關屬性。
- fork倉庫到本身名下
- 本地修改並提交到本身的git倉庫
- 在本身的fork倉庫找到 「Pull request」 按鈕，提交
開源項目不易，歡迎你們一塊兒參與，給【文章、GitHub開源庫】點星點贊，或資助服務器：