最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vuex
安装将不再赘述,可以参考之前的博客《Vue进阶(五):与 Vuex 的第一次接触》。
二、axios
使用 cnpm
安装 axios
。
cnpm install axios -S
安装其他插件的时候,可以直接在 main.js
中引入并 Vue.use()
,但是 axios
并不能 use
,只能每个需要发送请求的组件中即时引入。
为了解决这个问题,有两种开发思路,一是在引入 axios
之后,修改原型链,二是结合 Vuex
,封装一个 aciton
。
2.1 改进方案一:改写原型链
首先在main.js
中引入 axios
。
import axios from 'axios'
这时候在其它的组件中,是无法使用 axios
命令的。但如果将 axios
改为 Vue
原型属性,就能解决这个问题。
Vue.prototype.$ajax = axios
在 main.js
中添加这两行代码之后,就能直接在组件的 methods
中使用 $ajax
命令
methods: {
submitForm () {
this.$ajax({
method: 'post',
url: '/user',
data: {
name: 'wise',
info: 'wrong'
}
})
}
2.2 改进方案二:Vuex 中封装
之前文章讲解过 Vuex
的 mutations
,从结果上看,mutations
类似于事件,用于提交 Vuex
中的状态 state
。
action
和 mutations
也很类似,主要的区别在于,action
可以包含异步操作,而且可以通过 action
来提交 mutations
。
另外还有一个重要的区别:
mutations
有一个固有参数state
,接收的是Vuex
中的state
对象;action
也有一个固有参数context
,但是context
是 state 的父级,包含state、getters
。
Vuex
的仓库是store.js
,将 axios
引入,并在 action
添加新的方法:
// store.js
import Vue from 'Vue'
import Vuex from 'vuex'// 引入 axios
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
test01: {
name: 'Wise Wrong'
},
test02: {
tell: '12312345678'
}
},
actions: {
// 封装一个 ajax 方法
saveForm (context) {
axios({
method: 'post',
url: '/user',
data: context.state.test02
})
}
}
})
export default store
注意:即使已经在 main.js
中引入了 axios
,并改写了原型链,也无法在 store.js
中直接使用 $ajax
命令。换言之,这两种方案是相互独立的。
在组件中发送请求的时候,需要使用this.$store.dispatch
来分发。
methods: {
submitForm () {
this.$store.dispatch('saveForm')
}
}
submitForm
是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios
向服务器发送请求。
三、配置 axios
最后
面试一面会问很多基础问题,而这些基础问题基本上在网上搜索,面试题都会很多很多。最好把准备一下常见的面试问题,毕竟面试也相当与一次考试,所以找工作面试的准备千万别偷懒。面试就跟考试一样的,时间长了不复习,现场表现肯定不会太好。表现的不好面试官不可能说,我猜他没发挥好,我录用他吧。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
96道前端面试题:
常用算法面试题:
前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化
常用算法面试题:*
- [外链图片转存中…(img-oWsz0HYk-1715841698379)]
前端基础面试题:
内容主要包括HTML,CSS,JavaScript,浏览器,性能优化
- [外链图片转存中…(img-hhqwT7PD-1715841698380)]