directoryMenu.append(new MenuItem({
    label: this.$t('files.addFile'),
    click: () => {
        this.appendFile({target: data})
    }
}))

// action
appendFile({commit}, payload) {
    commit('APPEND_FILE', payload)
}

// mutation
APPEND_FILE(state, {target, opts = {}}) {
    let tempNode = new TreeModel()
    tempNode = tempNode.parse(util.formatFile(opts))
    if (target.isDirectory) {
        filesTreeModel.first(idEq(target.id)).addChild(tempNode)
    } else {
        filesTreeModel.first(idEq(target.id)).parent.addChild(tempNode)
    }
}

watch: {
    data: {
        deep: true,
        handler () {
            this.stateTree = this.data;
            this.flatState = this.compileFlatState();
            this.rebuildTree();
        }
    }
}

// good example, no need for deep clone

// init
afterInit(store) {
    filesTreeModel = new TreeModel()
    filesTreeModel = filesTreeModel.parse(store.state.ContractFiles.files)
}

// action
appendFile({commit}, payload) {
    commit('APPEND_FILE', payload)
}

// mutation
APPEND_FILE(state, {target, opts = {}}) {
    let tempNode = new TreeModel()
    tempNode = tempNode.parse(util.formatFile(opts))
    if (target.isDirectory) {
        filesTreeModel.first(idEq(target.id)).addChild(tempNode)
    } else {
        filesTreeModel.first(idEq(target.id)).parent.addChild(tempNode)
    }
}

// bad example, use tree model on action

// init tree model
afterInit(store) {
    filesTreeModel = new TreeModel()
    // 必须克隆，因为model引用store，否则在action中修改tree model会报错
    filesTreeModel = filesTreeModel.parse(cloneDeep(store.state.ContractFiles.files))
}

// action
appendFile({commit}, {target, opts = {}}) {
    let tempNode = new TreeModel()
    tempNode = tempNode.parse(util.formatFile(opts))
    if (target.isDirectory) {
        filesTreeModel.first(idEq(target.id)).addChild(tempNode)
    } else {
        filesTreeModel.first(idEq(target.id)).parent.addChild(tempNode)
    }
    commit('REFRESH_FILES')
}

// mutation
REFRESH_FILES(state) {
    // 必须克隆，否则model会被绑定，在action中修改tree model会报错
    state.files = cloneDeep(filesTreeModel.model)
}

// correct

// modules
export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters,
    util,
    afterInit(store) {
        filesTreeModel = new TreeModel()
        filesTreeModel = filesTreeModel.parse(store.state.ContractFiles.files)
    }
}

// vue store entry
const store = new Vuex.Store({
    state,
    mutations,
    getters,
    actions,
    plugins: [createPersistedState()],
    modules,
    strict: process.env.NODE_ENV !== 'production'
})

for (let key in modules) {
    modules[key].afterInit && modules[key].afterInit(store)
}

// wrong

const state = {
    files: []
}

let filesTreeModel = new TreeModel()
// 这里的state只是一个pure object，不会绑定数据，而且这里也没法拿到最终的数据
filesTreeModel = filesTreeModel.parse(cloneDeep(state.files))

// webpack，ejs-loader并没有用ejs官方的engine，而是用loadsh的template方法作为engine
rules: [
    { test: /\.ejs$/, loader: 'ejs-loader' }
]

const metaFiles = require.context('@/template', true, /meta\.js$/)

// 主要是生成文件树所需要的结构，目前gxcpp暂时不支持嵌套结构的编译，
// 所以最终生成的children中是平级的结构
util.compile = function (directory) {
    let files = tplMap[`${directory}Tpl`]
    const reg = /^\.\/(.+)\.ejs$/
    files = files.keys().map(key => {
        return {
            title: reg.exec(key)[1],
            content: files(key)
        }
    })

    const ret = {
        title: directory,
        children: files
    }

    ret.render = util.render.bind(util, ret)

    return ret
}

// 基于编译生成的数据结构，去渲染content，然后返回文件树所需的数据结构
util.render = function (project, opts = {}) {
    opts.entry = opts.entry || metaMap[project.title].entry
    if (opts.title) {
        project.title = opts.title
    }

    project.children = project.children.map(file => {
        // every child file render
        file.content = file.content(opts)
        return file
    })

    delete project.render

    return project
}

const deploy_contract = ({from = '', contractName = '', code = '', 
    abi = '', fee_id = '', password = '', broadcast = true}) => {
    ...
    return new Promise((resolve, reject) => {
        // 1.解锁钱包，本质上是根据password和账户信息，经过一系列密码学运算得到私钥
        resolve(Promise.all([fetch_account(from), 
            unlock_wallet(from, password)]).then(results => {
            ...
            // 2.构造交易，会去
            let tr = new TransactionBuilder()
            tr.add_operation(tr.get_type_operation('create_contract', {
                'fee': {
                    'amount': 0,
                    'asset_id': fee_id
                },
                'name': contractName,
                'account': fromAcc.id,
                vm_type,
                vm_version,
                code,
                abi
            }))

            // 3.处理交易
            return process_transaction(tr, from, password, broadcast).then((resp) => {
                // ... handle resp
                return resp
            })
        }))
    })
}

const process_transaction = (tr, account, password, broadcast) => {
    let walletInfo = null
    return new Promise((resolve, reject) => {
        // 1.解锁钱包
        resolve(unlock_wallet(account, password).then(info => {
            walletInfo = info
            // 2.设置手续费
            return Promise.all([tr.update_head_block(), 
                tr.set_required_fees()]).then(() => {
                // 3.用私钥签名
                tr.add_signer(PrivateKey.fromWif(walletInfo.wifKey))
                if (broadcast) {
                    // 4.广播交易
                    return tr.broadcast()
                } else {
                    return tr
                }
            })
        }))
    })
}

deploy_contract({
    from: this.currentWallet.account,
    fee_id: this.tempAsset.id,
    password: this.tempPwd,
    broadcast: true,
    abi: this.abi,
    contractName: this.contractName,
    code: this.bytecode
}).then((resp) => {
    ...
    // 将部署过的合约保存在本地
    this.appendContract(resp[0].ext)
    this.$store.dispatch('updateCurrentBalancesAndAssets')
})

computed: {
    ...mapState('ContractOperation', {
        contracts: state => {
            return contractsFilter(cloneDeep(state.contracts))
        }
    })
}

function contractFilter(contract) {
    contract.functions = contract.abi.actions.map((action) => {
        var struct = contract.abi.structs.find((struct) => {
            return struct.name === action.name
        })
        return {
            ...struct,
            ...action
        }
    })
    return contract
}

<div class="contract" v-for="contract in contracts">
	…
        <function-card v-for="f in contract.functions" :payable="f.payable"
             :abi="contract.abi" :contractName="contract.contractName"
                   :name="f.name" :fields="f.fields"></function-card>
</div>

// 上一步得到的处理后的参数数据
params = await fieldUtil.formatFields2Params(fields)

// 序列化参数
data = serializer.serializeCallData(this.name, params, this.abi).toString('hex')