插件使用
# 数据请求
CAF框架数据请求使用了第三方库axios ,
它是Vue推荐的方案,功能强大,使用简便。
框架做了统一的请求和响应拦截,请求拦截实现了数据格式的转换,响应拦截处理了接口请求的各种错误。
可在 src/common/plugins/axios.js 中参考详细代码。
Vue.prototype.$http = Axios
通过把Axios对象添加到Vue原型链,实现业务开发时调用数据请求工具的便捷性,举例说明:
export default {
methods: {
userList () {
this.$http.post(uri, {
id: 13
})
.then(({data}) => { // ({data}) 使用了ES6的对象解构,从返回值对象中取出data域
console.log(data)
})
}
}
}
# 状态共享
在大规模使用组件开发应用,尤其是存在组件深层次依赖时,组件间的数据交换困难重重,vuex是Vue生态圈为解决此类问题的优先方案,CAF也有vuex的使用,具体实现请参考 src/common/vuex下的代码
# 国际化
国际化采用Vue-i18n插件实现,资源组织规则如下:
在项目模块目录的locales目录下对应语言的资源文件(zh-CN.js、en-US.js)中增加资源配置:
export default {
module1: {
page1: {
key: value
},
page2: {
key: value
}
}
}
注意
请务必保持模块、页面、主键的三层结构,确保key不会重复
使用方法:
this.$t(module1.page1.key) // 将i18n key翻译成当前语言所对应的文字
小功能集 →