解构赋值
应用：函数参数的解构赋值
function fn1({username,password}){
console.log(username+password)
}
fn1({username: 'hua',password: '123'})
本例中：
login({commit},{username,password}){...}
权限管理
需求：页面刷新，数据都没了，登录状态也没了。
解决方法一：
在首页的组件中定义，在页面created时候，检查用户是否登录。
vuex
为什么要使用vuex
比如在我们的博客应用中，我们需要判断用户是否登录。
维护这个登录的状态，我们就使用vuex
state
我们所需要维护的数据，就在state中
在vue组件中，我们可以使用计算属性，不如store.state.count拿到vuex状态，也可以注入之后，使用this.$store
mapState函数，当一个组件需要多个状态，都用计算属性太麻烦，就可以使用辅助函数
getter
getter可以认为是state的计算属性，只用当依赖值变化，会被重新计算
mutation
如何修改state中维护的状态，就是使用mutation。
每个mutation都有事件类型和回调函数，回调函数的第一个参数是state
可以像store.commit传入额外的参数，即mutation的载荷payload
mutation必须是同步函数
action
action类似与mutation,不同点：
- action提交的是mutation,而不是直接变更状态
- action可以包含异步操作
mapActions辅助函数
axios
我们需要将api封装下，传入路径、方法、数据，我们可以得到结果
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默认值
axios发送请求：
具体见文档“请求配置”，只有url是必须的。
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// 发送 GET 请求
axios.get('/user', {
params: {
ID: 12345
}
})
等价于
axios.get('/user?ID=12345')
我们在上例中，先对请求配置做了设置，然后再去发送请求。
es6函数参数解构赋值
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
这样写就是啥参数都不传的时候，默认x=1,
blog.js博客api
获取博客
获取首页博客
获取用户博客
获取博客详情
修改博客
删除博客
函数checkLogin
为什么需要检查登录。我们在组件created的时候，就需要确认，用户是否登录。
因为我们有很多组件，在每个组件加载到页面的时候，我们都是需要知道，用户的登录状态，这个登录状态信息，我们用vuex维护。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。比如发送ajax请求。（今早的得到数据）
问题
在组件中想拿到vuex的状态，使用的方法：
把想拿到的数据，放在vuex的getters中，
我们在具体的组件中通过引入mapGetters，获取到数据。
问题promise的then,then
问题，页面刷新后，登录状态就消失。
解决，在header中，查询，用户是否登录，要是已经登录，就按照登录的要求去做。
在vuex中，设置查询函数
判断：
１．检查vuex中的登录状态，若登录，函数返回true，否则进行下一步
２．通过api接口，查询用户是否登录，得到返回值。根据返回值修改vuex状态
３．如果没有登录，返回false
４．如果已经登录，将信息提交到vuex
注册、登录、首页已经基本完了，接着完善Header
header中要显示头像，头像从哪来，我们维护到vuex中即可
导航守卫：
需求，当用户登录的时候，才能进入创建、编辑、我的，三个页面，
不加导航守卫，界面根本就不会出现这三个页面
但是当输入到url中，其实也是可以显示的，虽然毛都没有
但是我们需要，当用户没有登录的时候，只能进入到登录页面。
我们需要将路由做进一步的处理。
所以我们需要导航守卫。
vue-cli3
使用什么的看文档，遇到一个坑，本地用着好好的，发布到github上，路径全部出错。
需要配置vue.config.js
baseUrl: Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 baseUrl 为 /my-app/。
这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。
网友评论