解構(gòu)賦值
應(yīng)用：函數(shù)參數(shù)的解構(gòu)賦值
function fn1({username,password}){
console.log(username+password)
}
fn1({username: 'hua',password: '123'})
本例中：
login({commit},{username,password}){...}
權(quán)限管理
需求：頁面刷新直秆，數(shù)據(jù)都沒了蔫劣，登錄狀態(tài)也沒了船庇。
解決方法一：
在首頁的組件中定義，在頁面created時(shí)候侣监，檢查用戶是否登錄鸭轮。
vuex
為什么要使用vuex
比如在我們的博客應(yīng)用中，我們需要判斷用戶是否登錄橄霉。
維護(hù)這個(gè)登錄的狀態(tài)窃爷，我們就使用vuex
state
我們所需要維護(hù)的數(shù)據(jù)，就在state中
在vue組件中姓蜂，我們可以使用計(jì)算屬性按厘，不如store.state.count拿到vuex狀態(tài)，也可以注入之后钱慢，使用this.$store
mapState函數(shù)逮京，當(dāng)一個(gè)組件需要多個(gè)狀態(tài)，都用計(jì)算屬性太麻煩束莫，就可以使用輔助函數(shù)
getter
getter可以認(rèn)為是state的計(jì)算屬性懒棉，只用當(dāng)依賴值變化草描，會被重新計(jì)算
mutation
如何修改state中維護(hù)的狀態(tài)，就是使用mutation策严。
每個(gè)mutation都有事件類型和回調(diào)函數(shù)穗慕，回調(diào)函數(shù)的第一個(gè)參數(shù)是state
可以像store.commit傳入額外的參數(shù)，即mutation的載荷payload
mutation必須是同步函數(shù)
action
action類似與mutation,不同點(diǎn)：
- action提交的是mutation,而不是直接變更狀態(tài)
- action可以包含異步操作
mapActions輔助函數(shù)
axios
我們需要將api封裝下妻导，傳入路徑逛绵、方法、數(shù)據(jù)倔韭，我們可以得到結(jié)果
axios.defaults.baseURL = 'https://blog-server.hunger-valley.com'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.withCredentials = true
function request(url ,type='GET',data={}){
return new Promise((resolve,reject)=>{
let options = {
url: url,
method: type
}
if(type.toLowerCase === 'get'){
options.params = data
}else{
options.data = data
}
axios(options).then(res=>{
if(res.data.status === 'ok'){
resolve(res)
}else{
reject(res.data.msg)
}
})
})
}
前三句話是全局的axios默認(rèn)值
axios發(fā)送請求：
具體見文檔“請求配置”术浪，只有url是必須的。
// 發(fā)送 POST 請求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// 發(fā)送 GET 請求
axios.get('/user', {
params: {
ID: 12345
}
})
等價(jià)于
axios.get('/user?ID=12345')
我們在上例中狐肢，先對請求配置做了設(shè)置添吗，然后再去發(fā)送請求。
es6函數(shù)參數(shù)解構(gòu)賦值
function move({x=1,y} = {x:1}){
console.log(x+''+y)
}
move() //1 undefined
move({x:3,y:1}) //3 1
move({y:1}) //1 1
這樣寫就是啥參數(shù)都不傳的時(shí)候份名，默認(rèn)x=1,
blog.js博客api
獲取博客
獲取首頁博客
獲取用戶博客
獲取博客詳情
修改博客
刪除博客
函數(shù)checkLogin
為什么需要檢查登錄碟联。我們在組件created的時(shí)候，就需要確認(rèn)僵腺，用戶是否登錄鲤孵。
因?yàn)槲覀冇泻芏嘟M件，在每個(gè)組件加載到頁面的時(shí)候辰如，我們都是需要知道普监，用戶的登錄狀態(tài)，這個(gè)登錄狀態(tài)信息琉兜，我們用vuex維護(hù)凯正。
created：在實(shí)例創(chuàng)建完成后被立即調(diào)用。在這一步豌蟋，實(shí)例已完成以下的配置：數(shù)據(jù)觀測 (data observer)廊散，屬性和方法的運(yùn)算，watch/event 事件回調(diào)梧疲。然而允睹，掛載階段還沒開始，$el 屬性目前不可見幌氮。比如發(fā)送ajax請求缭受。（今早的得到數(shù)據(jù)）
問題
在組件中想拿到vuex的狀態(tài)，使用的方法：
把想拿到的數(shù)據(jù)该互，放在vuex的getters中米者，
我們在具體的組件中通過引入mapGetters，獲取到數(shù)據(jù)宇智。
問題promise的then,then
問題塘雳，頁面刷新后陆盘，登錄狀態(tài)就消失。
解決败明，在header中隘马，查詢，用戶是否登錄妻顶，要是已經(jīng)登錄酸员，就按照登錄的要求去做。
在vuex中讳嘱，設(shè)置查詢函數(shù)
判斷：
１．檢查vuex中的登錄狀態(tài)幔嗦，若登錄，函數(shù)返回true沥潭，否則進(jìn)行下一步
２．通過api接口邀泉，查詢用戶是否登錄，得到返回值钝鸽。根據(jù)返回值修改vuex狀態(tài)
３．如果沒有登錄汇恤，返回false
４．如果已經(jīng)登錄，將信息提交到vuex
注冊拔恰、登錄因谎、首頁已經(jīng)基本完了，接著完善Header
header中要顯示頭像颜懊，頭像從哪來财岔，我們維護(hù)到vuex中即可
導(dǎo)航守衛(wèi)：
需求，當(dāng)用戶登錄的時(shí)候河爹，才能進(jìn)入創(chuàng)建匠璧、編輯、我的咸这，三個(gè)頁面夷恍，
不加導(dǎo)航守衛(wèi)，界面根本就不會出現(xiàn)這三個(gè)頁面
但是當(dāng)輸入到url中炊苫，其實(shí)也是可以顯示的裁厅，雖然毛都沒有
但是我們需要冰沙，當(dāng)用戶沒有登錄的時(shí)候侨艾，只能進(jìn)入到登錄頁面。
我們需要將路由做進(jìn)一步的處理拓挥。
所以我們需要導(dǎo)航守衛(wèi)唠梨。
vue-cli3
使用什么的看文檔，遇到一個(gè)坑侥啤，本地用著好好的当叭，發(fā)布到github上茬故，路徑全部出錯(cuò)。
需要配置vue.config.js
baseUrl: Vue CLI 會假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上蚁鳖，例如 https://www.my-app.com/磺芭。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑醉箕。例如钾腺，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/，則設(shè)置 baseUrl 為 /my-app/讥裤。
這個(gè)值也可以被設(shè)置為空字符串 ('') 或是相對路徑 ('./')放棒，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑己英，也可以用在類似 Cordova hybrid 應(yīng)用的文件系統(tǒng)中间螟。
