2021-11-15

总结vue项目想遇到的问题
1.@submit.prevent作用：阻止表单的默认行为提交，提交自己定义的

2. this.$store.dispatch:登录状态和用户信息保存

if (result.data.code == 0) {
        const user = result.data.user;
        // 1.保存user到vuex中的state
        this.$store.dispatch("saveUser", user);
        // 2.跳转到个人中心
        this.$router.replace("/personal");
      } 

将用户信息保存到vuex中的state

/*
State:状态对象
 */
export default {
  userInfo: {}, // 用户信息
}

vue的一个状态管理 组件里dispatch提交action，这是一个异步的，通过mutations，去管理state就是状态，各个组件内部就能通过store储存去拿到更改后的值‘

vuex生命周期图

/*
直接更新state的多个方法的对象
*/
import {
  RECEIVE_USER_INFO,
} from './mutation-types'

export default {
  [RECEIVE_USER_INFO] (state,{userInfo}) {
    state.userInfo = userInfo
  },
}

一个是state作为数据中心组件间通信，一个是后端返回值纳入后，在store里面操作，优化代码层级，方便维护

vue中本地存储返回的token和用户id,并发送请求获取个人信息（携带token）

created方法的使用

created是一个生命周期的钩子函数。在实例化创建完成后被立即调用；vue实例生成后调用函数。一般可以在created函数中调用ajax获取页面初始化所需的数据。

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})

mounted和created的区别

created：在模板渲染完成html前进行调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些操作。

ajax请求头与参数的格式

要注意请求头要与参数用花括号分隔开，

六级标题