二：vuex
先看官方文档
Vuex 官方文档：https://vuex.vuejs.org/zh-cn/
vuex 是一个专为vue应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex 不同于localstorage，刷新之后vuex中的state数据就会丢失
所以vuex只能用于单页面之间不同组件数据流通
1：基础概念
state
vuex 单一状态树，使用一个对象就包含应用层所有状态
简单是说，state就是vuex要传递的数据
getters 是对于state数据的过滤或者计算，一些简单或通用的操作可以抽取到getters上来，方便在应用中引用。
action 动作
store中数据修改是在action中提交
action和mutation类似
action提交是mutation，并不直接修改数据，而是触发mutation修改数据
mutations主要是用来修改vuex 的状态
ps：只能同步操作。
2：加载方式
npm引入
npm install vuex
main.js加载
单独组件引入
页面引入
import {mapState, mapMutations} from ‘vuex’
computed: {
…mapState([
‘latitude’,’longitude’
])
},
methods: {
…mapMutations([
‘RECORD_ADDRESS’
]),
}
在store文件夹中state中写入 latitude 的state
现在就可以在页面调用，
在mutations中写入方法
RECORD_ADDRESS可以作为方法在本页面调用；
三：computed
先看官方文档
vue内部，如果放入太多逻辑会难以维护
所以对于复杂的逻辑，就要用到官方属性
computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split(”).reverse().join(”)
}
}
计算属性也是属性的一种，在template中也可以直接显示
Computed reversed message: “{{ reversedMessage }}”
这里使用了一个计算属性 reversedMessage。我们提供函数将作为vm.reversedMessage的getter函数
1：计算属性缓存vs 方法
在computed可以使用计算属性，但在methods也可以使用一个方法
但是不同的是计算属性基于缓存，这表示message没有改变，
2：计算属性 vs 监听属性
vue 使用监听属性watch，监听数据波动，但是数据会随着其他数据变动而变动。
data:{
firstName: ‘Foo’,
}
watch:{
firstName: function (val) {
this.fullName = val + ’ ’ + this.lastName
},
}
计算属性没有setter，只有setter。不过也可以写入setter；
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ’ ’ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(’ ‘)
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
四：生命周期
vue的生命周期图
beforeCreate 组件刚被创建，组件属性计算之前，data
created 组件创建完成，属性已经绑定，dom未生成，$el不存在
beforeMount 模板挂载之前
mounted 挂载之后
beforeUpdated 组件更新前
updated 更新之后
activated keep-alive 激活时
beforeDestory 组件销毁前
destoryed 销毁后
全局钩子
router.beforeEach((to,from,next)=>{
next()
})
router.afterEach(route => {
})
组件内部钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave；
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）