二：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 （確認的）