1. 程式人生 > >vue Esview 視覺化程式設計 程式流程(二)

vue Esview 視覺化程式設計 程式流程(二)

接上次:
當呼叫assemble_page的時候,呼叫mounted函式
mounted(){
this.clear()
//window.location.hash = deepCopy(window.location.hash) + ’ ’
this.getControlClazzes()//
resetSnapShot()
this.appId = this. r o u t

e . q u e r y . a p p
I d t h i s . p a g e
S o u l I d = t h i s . route.query.appId this.pageSoulId = this. route.query.pageSoulId
this.clear()

  getControlList.call(this, (data) => {

這裡面執行兩個比較重要的函式:
getControlClazzes:這個函式比較難理解
和getControlList
GetControlClazzes函式:在app.vue中
mapActions(‘dragModule’, [‘getControlClazzes’]),
關於action的說明,在官網中:https://vuex.vuejs.org/zh/guide/mutations.html
這個mapActions語句很難懂,具體引數定義說明見:
https://vuex.vuejs.org/zh/guide/modules.html#帶名稱空間的繫結函式
就是表示對映到新的路徑: dragModule/getControlClazzes
getControlList函式把控制元件顯示出來:
getControlList.call(this, (data) => {

    let draggableControls = []

    data.forEach(origin => {
      let control = makeControl(origin.code);
      control.clazzId = origin.clazzId
      draggableControls.push(control)
    })

我們看看getControlList函式如何實現:(develop_resource.js)
function getControlList(fn) {
this.$http.post(‘control/controlList’).then(res => {
if (res.data.code === 10000) {
this.controls = res.data.data
if(fn){
fn.call(this,res.data.data)
}
}
})
函式從後臺control表中取出來資料並且儲存在draggableControls中,呼叫
setDraggableControls(drag_module.js),把資料儲存在state變數中(drag_module.js)
setDraggableControls(state, draggableControls){
state.draggableControls = draggableControls
},
之後繼續執行
init(draggableControls)
在init中執行store.commit(‘dragModule/setSoul’, copy),提交vuex的mutation
Vuex文件在:https://vuex.vuejs.org/zh/guide/ 還需要補一下。
Commit之後就是copy給state中的soul賦值了。

在drag_module.js中,setDragElement函式當拖拽的時候被呼叫。
state.dragElement = element
出現不能相應onDragEnd 等函式,除錯解決。。。。