let's share的思考

2018-12-02 本文已影响0人索伯列夫

解构赋值

应用：函数参数的解构赋值

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 应用的文件系统中。