vue进阶总结3

Vuex

Vuex有几个很重要的概念：

• State

• • 存储应用状态的地方，是响应式的，即当 State 发生变化时，与之相关的组件将自动更新

• Getter

• • 类似于计算属性

• Mutation

• • 是用于变更状态的唯一途径
  • 每个 Mutation 都有一个字符串的事件类型（type）和一个回调函数，用于实际的状态变更

• Action

• • Action 提交的是 Mutation，而不是直接变更状态
  • Action 可以包含任意异步操作

• Module

• • 将 Vuex 的状态划分为模块，每个模块都有自己的 State、Getter、Mutation 和 Action

Mutation 和 Action 的区别

特点	Mutation	Action
同步/异步	同步	异步
直接/间接	直接修改状态	通过提交 Mutation 间接修改状态

为什么Mutation是同步，Action是异步？

1. Vue2的响应性不完整，不能监听数组的变化、对象属性的变化，
2. 上面也有说过，Action是调用Mutation间接修改状态，如果Mutation是异步的那么会导致一个问题就是我们知道Mutation是何时调用的，却不知道State的值是何时被需修改的。（这也主要是因为Vue2的响应式有些缺陷导致的）
3. 同步变化，vuex 内部调用 Mutation 之前记录状态，然后调用 Mutation ，然后获得修改后的状态。

Vue-router

这个比较简单，我们需要记住几个东西：

1. hash模式
2. history模式

对比

** **	hash	history
表现形式	http://aaa/#/user/id	http://aaa/user/id
基于api	onhashchange	配合 history.pushState + window.addEventListener("popstate", ()=> {})
配置方式	不需要后端	需要后端协助