Vue系列笔记5

发表于
字数统计 1.2k | 阅读时长 5

学习参考：coderwhy教学视频，整个系列可能会比较混乱，学到哪里觉得有需要的记录一下，可能和之前的java笔记类似。

  1. Vuex是一个专为Vue.js专用程序开发的状态管理模式。其实，可以简单的将其看作把需要多个组件共享的变量全部存储到一个对象里面，然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。而且最重要的是，这个对象是响应式的；

  1. 一般什么状态需要多个组件之间共享呢？例如用户的登录状态、用户名称、头像，例如商品的收藏、购物车中商品等；
  2. 简单使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// src/store/index.js
// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
    state: {
        counter: 100
    },
    mutations: {
        // 方法
        increament(state) {
            return state.counter++
          },
          decreament(state) {
            return state.counter--
          }
    },
    actions: {

    },
    getters: {

    },
    modules: {

    }
})

// 3.导出store对象
export default store
1
2
3
4
5
6
7
8
9
10
11
// APP.js
……
  methods: {
    addition() {
      return this.$store.commit('increament')
    },
    subtraction() {
      return this.$store.commit('decreament')
    }
  }
……

Vuex的store状态的更新唯一方式：提交mutation，mutation中回调函数的第一个参数就是state，传递的参数可以在state后边，被称作载荷(Payload)。

  1. Vuex五大核心：state、mutations、actions、getters、modules：其中state就是存储管理变量、mutations类似methods，其中定义一些方法，对状态变量进行操作，但是只能是同步、actions针对异步操作、getters类似于computed，对状态变量进行一些计算或者筛选、modules主要是对state进行分流，随着要管理的变量增加，state会越来越臃肿，但是Vuex要求单一状态树(单一数据源)，所以就可以利用modules进行分模块，每个模块里又可以定义上述state、mutations等；
  2. ES6新语法，对象的解构：
1
2
3
4
5
6
7
8
9
10
const obj = {
	name: 'gsynf',
	age: 18,
	height: 1.88
}

// const name = obj.name;
// const age = obj.age;

const {name, age} = obj
  1. Vue中发送网络请求有很多方式：
    • 传统的Ajax是基于XMLHttpRequest（XHR）；
    • 比传统的Ajax更好用的jQuery-Ajax;
    • 官方在Vue1.x时期，推出了Vue-resource；
    • 在宣布Vue-resource不再维护时，推荐了axios；
  2. 使用JSONP最主要的原因是为了解决跨域访问的问题；

  1. axios功能特点：
  • 在浏览器中发送XMLHttpRequests请求；
  • 在node.js中发送http请求；
  • 支持Promise API；
  • 拦截请求和响应；
  • 转换请求和响应数据；
  1. axios最基本的使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
// 1.基本使用
// axios(config)
axios({
  url: 'httpbin.org/'
  // 默认就是get
  method: 'GET'
}).then(res => {
  console.log(res);
})

// axios.get('httpbin.org/').then(res => {
//   console.log(res);
// })
  1. 发送并发请求可以使用axios.all([])，传入的参数和返回的结果都是一个数组。传入参数的数组内每个对象就是上述每个单一的axios请求。
  2. axios常见配置选项：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
请求地址
url: '/user',

请求类型
method: 'get',

请根路径
baseURL: 'http://www.mt.com/api',

请求前的数据处理
transformRequest:[function(data){}],

请求后的数据处理
transformResponse: [function(data){}],

自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象
params:{ id: 12 },

查询对象序列化函数
paramsSerializer: function(params){ }

request body
data: { key: 'aa'},

超时设置s
timeout: 1000,

跨域是否带Token
withCredentials: false,

自定义请求处理
adapter: function(resolve, reject, config){},

身份验证信息
auth: { uname: '', pwd: '12'},

响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
  1. 意识：凡是对第三方框架，都不要在每一个组件内都加入依赖，这样一旦第三方框架停止维护，整个项目的维护将是一个巨大的工程，一般都要将对第三方框架进行一个封装。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// network/request.js
export function request(config) {
    // 1. 创建axios实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000/api/v1',
        timeout: 5000
    })
    // 2.发送真正的网络请求
    return instance(config)

}

// main.js
request({
  url: '/home/multidata',
}).then(res => {
  console.log(res);
  
}).catch(err => {
  console.log(err);
  
})
  1. axios提供了拦截器，用于在发送每次请求或者得到响应后，进行对应的处理；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//1 请求拦截
instance.interceptors.request.use(config => {
    console.log(config);
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时，在界面显示一个请求图标
    // 3.某些网络请求，例如登录（token），必须携带一些特殊的信息
    return config
}, err => {
    console.log(err);   
});
// 2 响应拦截
instance.interceptors.response.use(res => {
    console.log(res);
    return res.data
}, err => {
    console.log(err);
    
});

注：转载文章请注明出处，谢谢~