Vue笔记

Vue基础学习

Vuex

什么是Vuex

它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex也集成到Vue的官方调试工具devtools extension, 提供了诸如零配置的time-travel 调试、状态快照导入导出等高级调试功能。

什么是状态管理

您可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面，
将这个对象放在顶层的Vue实列中，让其他组件可以使用，多个组件即可以实现共享访问。

什么样的状态需要在Vuex里面管理呢？

1. 用户的登录状态，用户名称， 头像，地理位置等信息
2. 商品的收藏， 购物车中的物品等
3. 这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且他们还是响应式的

Vuex使用方式

1. 安装Vuex插件
2. 创建store>index.js
3. index.js中导入vuex
4. Vue.use(Vuex)注册插件
5. 导出store对象
6. 在main.js中挂在store对象
7. 通过$store.state.valueName获取到变量

store>index.js

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

store的参数

参数	作用
state
mutations
actions
getters
modules

Axios学习

封装axios，此示例展示了回调函数

import axios from "axios";

export function request(config, success, failure) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL:'http://127.0.0.1:4523',
    timeout:5000
  })

  instance(config).then( res => {
    // console.log(res);
    success(res);
  }).catch( err => {
    // console.log(err);
    failure(err)
  })
}

import axios from "axios";

export function request(config) {
  return new Promise((resolve, reject) => {
  //  1.创建axios的实例
    const instance = axios.create({
      baseURL:'http://127.0.0.1:4523',
      timeout:5000
    })

    // 2.axios的拦截器(拦截请求对请求进行改造)
    // （1）请求拦截
    instance.interceptors.request.use(config => {
      //拦截下来的是请求配置
      console.log(config);
      // 拦截后需要手动返回数据
      return config
    }, err => {
    //  处理请求失败
    });
    // (2)响应拦截
    instance.interceptors.response.use(result => {
      return result.data;
    }, err => {
      console.log(err);
    });

    // 3.发送真正的网络请求
    instance(config).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}