日常工作知识点集合之vue
1.vue移动端项目中遇到的问题
window.scrollTo(0, 0) //页面切换时强制滚动到顶端
//多个接口报错时，避免报错信息重叠
async fetchData() {
this.isAllFetchError = false
await Promise.all([
this.fetchPassenger(),//在这三个接口返回的对应的错误code码中设置isAllFetchError==true
this.fetchTrend(),
this.fetchWdPlazasInfo()
])
if (this.isAllFetchError) {
alert('运行错误')//错误信息
}
this.isAllFetchError = false
},//多个接口数据为空时，错误信息只提示一次
vue移动端rem设置
data() {
return {
screenWidth: document.body.clientWidth,
timer: false
}
},
created() {
this.calRem()
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
this.screenWidth = window.screenWidth
this.calRem()
})()
}
},
watch: {
screenWidth(val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
setTimeout(() => {
this.calRem()
this.timer = false
}, 400)
}
}
},
methods: {
calRem() {
const docEl = document.documentElement
const rem = this.screenWidth / 3.75
docEl.style.fontSize = rem + 'px'
},
}
2.axios的设置
axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多可控功能。
特点：支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器支持防止CSRF（跨站请求伪造）
axios中文文档
axios在vue中用法
3.export和export default以及export as
1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要
4.根据登录时的用户角色，显示相应的页面
main.js
const getRouterName = function(allArray, obj) {
if (obj.children && obj.children.length > 0) {
for (let i = 0; i < obj.children.length; i++) {
allArray.push(obj.children[i].name)
getRouterName(allArray, obj.children[i])
}
} else {
return
}
}
//定义一个全局方法，返回true则表示能进入该页面，false则把跳转路由的按钮置灰
Vue.prototype.$targetPathAuth = function(targetPath) {
let userRouter = []
getRouterName(userRouter, store.getters.addRouters[0])
return userRouter.indexOf(targetPath) === -1
}
使用：
编辑
data(){
return {
edit: false,
}
},
created() {
this.edit = this.$targetPathAuth('EditAlgorithm')
},
5.在页面下钻及上钻时可能会改变多个vuex变量，可把多个commit动作合并成一个dispatch
/** @format */
const actions = {
drillUp({ commit }, payload) {
commit('updateDefaultOrgName', payload.name)
commit('upDrillPath')
commit('updateLevelCode', payload.orgLevelCode)
commit('updateTabShowStatus', true || payload.tabShowStatus)
},
drillDown({ commit }, payload) {
commit('downDrillPath', {
name: payload.name,
id: payload.id
})
commit('updateDefaultOrgName', payload.defaultOrgName)
commit('updateLevelCode', 'plaza')
commit('updateTabShowStatus', payload.tabShowStatus)
}
}
export default actions
//用法
this.$store.dispatch('drillDown', {
name: this.$store.state.defaultOrgName,
id: this.$store.state.workingOrgCode,
defaultOrgName: item.plazaName,
singlePlazaSignal: true,
tabShowStatus: false
})
6.vue项目git提交代码自动格式化
package.json中
"scripts": {
"lint": "vue-cli-service lint",
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {
"no-console": 0,
"no-useless-escape": 0,
"no-multiple-empty-lines": [
2,
{
"max": 3
}
],
"prettier/prettier": [
"error",
{
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"insertPragma": true,
"requirePragma": false
}
]
}
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"prettier --write",
"vue-cli-service lint --fix",
"git add"
]
}
7.mixin和provider/inject
minin用法
provider/inject用法
8.异步神器async-await介绍
9.vue-router 中的导航钩子
10.keep-alive组件的使用及其实现原理
11.store的数据流流程
12.数据更新时怎么使用store
13.实现只想 router-view 里面某个组件被缓存？
参考：https://www.jianshu.com/p/0b0222954483
关键点：使用 router.meta 扩展
14.watch用法
watch用来监听在页面中捕捉不到的变化，如果能在页面方法及计算属性中拿到值，就不需要使用watch方法
发表评论 (审核通过后显示评论)：