复习知识点整理

零碎语法

1.导入某个文件夹的index文件，index可以省略（这里导入的是router和store文件下的index.js文件）

2.直接在对象后面加？（？.属性或方法是ES6语法）

找的到前面的对象就调用后面的方法，否则不调用

2.路由懒加载

this

1.在vue文件中使用router\store对象时

this：普通函数的this指向vue实例对象(在没有明确指向的时候this指向window)
router和store挂载在vue上之后
在模板中使用 router或store的方法为 $router.xxx或$store.xxx
在方法中调用方式为：this.$router.xx或this.$store.xxx
1
2
3
4

2.在js文件中使用router\store对象时
使用什么需要导入时候，挂载在vue全局对象上的对象在vue文件中可以使用，在js文件中不能使用

网络通信

axios功能拆分写法

还可以配置拦截器

import axios from 'axios'

// 下面是克隆一份新的axios
const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net',
  timeout: 5000
})
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 在发送请求之前做些什么
  // config === https://www.axios-http.cn/docs/req_config === 请求的配置对象
  const token = localStorage.getItem('mobile-token')
  config.headers.Authorization = `Bearer ${token}`
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

export default request


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

css预处理（Sass\Stylus\Less\Scss）

参考

token

将token存储到vuex中比存储到本地更快，但是只要页面一刷新token就失效，想要永久存储还是需要在本地存储中存储一份token
//举例(只在页面刷新的时候用到了本地存储，添加请求头用的token是从vuex中取，不用在从本地存储中取

export default {
  namespaced: true,
  state: {
    token: localStorage.getItem('mj-pc-token')

  },
  mutations: {
    updateToken (state, newToken) {
      state.token = newToken
      localStorage.setItem('mj-pc-token', newToken)
    }
  },
  actions: {

  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

项目打包

参考

cookie持久化（类似localstroage，只是换了一种方案）

document.cookie 会获取所有cookie的字符串
不方便获取自己需要的
这里js-cookie插件(封装了各种方法)

// 专门用来操作cookie的方法包
// 内部封装了繁琐的操作方法 参数处理 暴露三个函数 get,set,remove
import Cookies from 'js-cookie'
import { TOKEN_KEY } from '@/constants/KEY'  //TOKEN_KEY为存cookie的键，把所有的常量都封装到一个单独的文件中，目的是方便维护
// 获取token的方法
export function getToken() {
  return Cookies.get(TOKEN_KEY)
}

// 设置方法
export function setToken(token) {
  return Cookies.set(TOKEN_KEY, token)
}

// 删除方法
export function removeToken() {
  return Cookies.remove(TOKEN_KEY)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

cookie对比localstorage的有点

每次发送http请求的时候cookie都会自动跟着请求带到服务端