Following the previous one, we use Vuex to implement the top navigation bar events and the top right status bar.
Js + Nuxt.js + Element + Vuex + open source JS drawing library, to create your own online drawing software, the final effect: topology.le5le.com. If you feel good, feel free to like the article and open source library, so that we are more motivated to do well!
Source code for this tutorial is Github
directory
- Building a project framework, Tutorial 1
- Vuex, Tutorial two
- Right menu, tutorial three
- HTTP communication, Tutorial three
- Routing, Tutorial three
First, vuEX is used to communicate messages and send menu commands
There are many ways to communicate vUE messages, but we will only focus on vuex.
1. Create a store/event.js file
export const state = () => ({
event: {
name: ' ',
data: null
}
})
exportOpen mutations = {emit(state, event) {state.event = event}}Copy the codeHere, we just pay attention to state and mutations, and Nuxt.js will automatically complete the complete VUex. The event file name in the Store file is automatically converted to Vuex’s Module: Event.
Where, state is our global data saving state; Mutations is a collection of methods that update data without being asynchronous; Actions is a collection of methods that asynchronously update data (not currently available here).
2. In the top navigation menu event, update data
Layouts/Default. vue menu response event:
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}}}Copy the codeWhere, use this. codestore.mit to send the update store data request with the indistishablestep state. Event in ‘event/emit’ refers to the store module: event(.js); Emit means the name of a function in mutations or Actions. Because the data is updated via commit, the emit function in mutations corresponds. The second parameter to commit is the latest data we want to update.
3. On pages/index.vue, listen for message events
When we update store data, each page data will be updated automatically. Here we use the watch to monitor messages:
computed: {
event() {
return this.$store.state.event.event
}
},
watch: {
event(curVal) {
if (this['handle_' + curVal.name]) {
this['handle_' + curVal.name](curVal.data)
}
}
}
Copy the codeFirst, we set a dynamic attribute event through dynamic attribute computation, and then monitor the change of event through watch, that is, message monitoring is completed.
Different menu events correspond to canvas actions, refer to the Canvas API documentation
Second, vuEX is used to realize the status bar in the upper right corner
1. Create a file store/canvas.js to save the global canvas state
export const state = () => ({
data: {
scale: 1,
lineName: 'curve',
fromArrowType: ' ',
toArrowType: 'triangleSolid',
locked: 0
}
})
export const mutations = {
data(state, data) {
state.data = data
}
}
Copy the code2. Listen for state changes in onMessage (canvas message return function) to update data
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}}Copy the codeCanvas. Data has a lot of data, so we only focus on a few global state attributes here. This. Codestore.com MIT (‘canvas/data’, this.canvas. Data) cannot be passed directly to the original JSON object due to vuex.
3. Display data in the layouts/default.vue status bar
[Only partially implemented here] We exposed the UI with computed dynamic properties:
computed: {
scale() {
return Math.floor(this.$store.state.canvas.data.scale * 100)
},
lineName() {
const lineNames = {
curve: 'curve',
polyline: 'line',
line: 'straight'
}
return lineNames[this.$store.state.canvas.data.lineName]
}
}
Copy the code4. Drop down the status bar in the upper right corner to modify the state of the canvas through the previous message event communication
Third, other
The top navigation menu and simple status bar are now complete, and there are more features to come.
But, but, but… The complete status bar is not complete yet, I hope you can participate in the improvement according to the development document, the opportunity to show their stage, can join the list of contributors! If you are not clear, please contact the administrator: (wechat) Alsmile123, or add group:
How to contribute
Pr on GitHub: 0. Read the development documentation to learn about related attributes.
- Fork warehouse to own name
- Make changes locally and submit them to your own Git repository
- Find the “Pull Request” button in your fork repository and submit it
Open source project is not easy, welcome everyone to participate, give [article, GitHub open source library] star like, or sponsor server:
