# vue 全家桶

vuex
- 基本属性
axios
- axios 拦截
- 相比 ajax 的优势
vue-router

# vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用 vuex 。

场景

多个组件共享数据
跨组件传递数据

# 基本属性

state：vuex的基本数据，用来存储变量
getter：从基本数据(state)派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，必须同步
- 每个 mutation 都有一个事件类型 (type) 和一个回调函数 (handler)
- 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数
action：和mutation的功能大致相同，不同之处在于
- Action 可以包含异步操作
- Action 提交的是 mutation ，而不是直接变更状态
modules：模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、getters,使得结构非常清晰，方便管理。

# axios

axios原理及面试题 (opens new window)

axios 是一个基于 promise 的 HTTP 库，前端流行的 ajax 请求库， vue 官方都推荐使用 axios 发送请求。

浏览器端， axios 封装了 XMLHttpRequest 对象发送 ajax 请求。

特点

基于 Promise
支持请求和响应的拦截
可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON 类型的数据
安全性更高，客户端支持防御 XSRF

# axios 拦截

axios 拦截分为请求拦截跟响应拦截。

# 相比 ajax 的优势

ajax 的请求步骤

创建异步XMLHttpRequest对象
设置请求参数，包括请求的方法和URL等
发送请求
注册事件，事件状态变更会及时响应监听
在监听里面获取并处理返回数据

单纯使用 ajax 却需要引用整个 jQuery ，不合理
基于事件的异步模型，不友好

# vue-router

vue面试题之二：路由 vue-router 面试题 (opens new window)

# hash 路由与 history 路由

hash 路由原理是 onhashchage 事件，可以在 window 对象上监听这个事件。

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL)
  let hash = location.hash.slice(1)
}

1
2
3
4

location.hash 的值实际就是 URL 中 # 后面的东西。

history 实际采用了 HTML5 中提供的 API 来实现，主要有 history.pushState() 和 history.replaceState() 。

history 模式需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出 404 。

# 路由懒加载

把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率。

const router = new VueRouter({
    routes: [{
        path: '/home',
        name: 'Home'，
        // 动态加载组件
        component:() = import('../views/home')
    }]
})

1
2
3
4
5
6
7
8

# `$route` 和 `$router` 的区别是什么？

router 为 VueRouter 的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

route 是路由信息对象（跳转的路由对象），每一个路由都会有一个 route 对象，是一个局部对象，包含 path 、 params 、 hash 、 query 、 fullPath 、 matched 、 name 等路由信息参数。

# 导航钩子

全局前置守卫： beforeEach
全局后置钩子： afterEach
路由独享钩子： beforeEnter
组件内导航钩子： beforeRouteEnter 、 beforeRouteUpdate 、 beforeRouteLeave

# 路由传参

# Params

只能使用 name ，不能使用 path
参数不会显示在路径上
浏览器强制刷新参数会被清空

// 传递参数
this.$router.push({
    name: Home，
    params: {
        number: 1 ,
        code: '999'
    }
})
// 接收参数
const p = this.$route.params

1
2
3
4
5
6
7
8
9
10

# query

参数会显示在路径上，刷新不会被清空
name 可以使用path路径

// 传递参数
this.$router.push({
    name: Home，
    query: {
        number: 1 ,
        code: '999'
    }
})
// 接收参数
const q = this.$route.query

1
2
3
4
5
6
7
8
9
10
11