mixins php,Mixins的使用

mixins/RemoteData.js：

export default function (resources) {

return {

data() {

let initData = {

removeDataLoading: 0,

remoteErrors: {},

}

// 下面这个for循环很重要，如果不初始化数据，就不会被Vue添加响应式属性，因此组件不会在属性更改时更新

for(const key in resources) {

initData[key] = null

initData.remoteErrors[key] = null

}

return initData

},

created () {

// 在钩子函数中操作DOM建议加上this.$nextTick

this.$nextTick (function () {

for (const key in resources) {

let url = resources[key]

this.fetchResource(key, url)

}

})

},

methods: {

async fetchResource (key, url) {

this.$data.removeDataLoading++

this.$data.remoteErrors[key] = null

try {

this.$data[key] = await this.$fetch(url)

} catch (e) {

// console.error(e)

this.$data.remoteErrors[key] = e

}

this.$data.removeDataLoading--

}

},

computed: {

remoteDataBusy () {

return this.$data.removeDataLoading !== 0

},

hasRemoteErrors () {

return Object.keys(this.$data.remoteErrors).some(

key => this.$data.remoteErrors[key]

)

},

}

}

}