vue渐进式框架-vuex及axios的封装

---

一、Vuex起步

首先我们要知道Vue的三驾马车：Vue本身，Vue Router路由，Vuex状态管理工具。 状态指的就是数据。

---

以下是一个表示“单向数据流”理念的简单示意（状态管理：可预测的数据流向）：

二、状态管理

作用：1、实现组件之间的数据共享 2、用于实现缓存 提示：在vue应用程序中，vuex不是必须的，是可选的

---

1、安装

cnpm install vuex -S

2、注册并创建Store
在src根目录创建 store.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {}
})

3、在main.js中挂载store

import store from './store'
new Vue({
  store
}).$mount('#app')

4、在组件中使用store

this.$store.state.msg 访问store中共享的数据
# 修改store数据
this.$store.state.msg = 'new val' // 不建议这么做，因为在devTools中没法调试
this.$store.commit('mutations方法', payload)

三、devTools的安装

1、下载这个包，放在你喜欢的任何目录下 https://github.com/arcliang/Vue-Devtools- 2、打开谷歌浏览器，点击设置、打开设置 3、在设置页面，点击“扩展程序”，并开启“开发者模式” 4、选择“加载已解压的扩展程序”，选择刚刚你下载的devTools/chrome文件夹 5、关闭谷歌浏览器，就有了devTools这个调试工具

四、Vuex的核心概念

state

凡是放在state中的数据，可以被当前程序中任何组件进行访问，state中的数据是可以被共享的。

mutations

它的作用只有一个，就是用于修改state中的数据，当state中的数据发生变化时，页面视图自动更新，可以在devtools中产生记录

getters

相当于是计算属性，当他所关联的state变量发生变化时，getters变量自动更新

actions

它的作用是专门用于和后端api交互的
在组件中，使用this.$store.dispatch(“actions方法名”，“接口入参”)触发

---

五、封装axios

简介：它是基于Promise封装 可以使用方法： axios().then().catch().finally() 特点：可以用于浏览器环境，也可用于Node.js环境

import axios from "axios"

const baseURL = "https://cnodejs.org/api/v1"

//创建axios实例
const fetch = axios.create({
  baseURL, //调接口的目标服务器地址
  timeout: 7000, //表示调后端接口超过7秒钟就失败，设置超时时间
  headers: {'X-Custom-Header': 'foobar'} //请求头
});

//封装请求拦截器
fetch.interceptors.request.use(function (config) {
  // 在请求发送之前，在这里可以做一些事儿
//console.log("请求之前",config)
  return config;
}, function (error) {
  return Promise.reject(error);
});
 
//封装响应拦截器
fetch.interceptors.response.use(function (response) {
  //当响应数据回来时，可以对响应数据做一些过滤
  let res = null
  if(response.status ==200){
	if(response.data.success){
		res = response.data.data
	}else{
		console.log("网络错误，请稍后再试")
	}
  }
  return res
  
}, function (error) {
  return Promise.reject(error);
});

export default fetch

---

六、Vuex工作流程总结

页面通过dispatch这个方法触发actions与后台交互调接口拿到后端的数据，然后通过commit触发mutations修改state中的数据，最后渲染到页面。