vue Esview 可视化编程 程序流程（二）

接上次：
当调用assemble_page的时候，调用mounted函数
mounted(){
this.clear()
//window.location.hash = deepCopy(window.location.hash) + ’ ’
this.getControlClazzes()//
resetSnapShot()
this.appId = this.$route.query.appIdthis.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 等函数，调试解决。。。。