Vue之状态管理(vuex)与接口调用

Vue之状态管理(vuex)与接口调用 一,介绍与需求  1.1,介绍 1,状态管理(vuex)

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

状态管理核心

state里面就是存放项目中需要多组件共享的状态

mutations就是存放更改state里状态的方法

getters就是从state中派生出状态,比如将state中的某个状态进行过滤然后获取新的状态。

actions就是mutation的加强版,它可以通过commit mutations中的方法来改变状态,最重要的是它可以进行异步操作

modules顾名思义,就是当用这个容器来装这些状态还是显得混乱的时候,我们就可以把容器分成几块,把状态和管理规则分类来装。这和我们创建js模块是一个目的,让代码结构更清晰。

2,axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止 CSRF/XSRF

  axios并没有install 方法,所以是不能使用vue.use()方法的。

解决方法有很多种:

.结合 vue-axios使用

axios 改写为 Vue 的原型属性

使用 vue-axios

在主入口文件main.js中引用

1 import axios from 'axios' 2 import VueAxios from 'vue-axios' 3 Vue.use(VueAxios,axios);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzyyw.html