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