Vuex+axios
Vuex+axios
Vuex简介
vuex是一个专门为Vue.js设计的集中式状态管理架构。
状态? 我们把它理解为在data中需要共享给其他组件使用的部分。
Vuex和单纯的全局对象有以下不同:
1、Vuex 的状态存储是响应式的。当vue组件从store中读取状态的时候,
若store中的状态发生变化,那么相应的组件也会相应的得到高效更新。
2、你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示的
提交(commit)mutation。这样使得我们可以方便的跟踪每一个状态的变化,
从而让我们能够实现一些工具来帮助我们更好的了解我们的应用。
安装使用vuex
-- npm install vuex

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex' Vue.use(vuex) Vue.config.productionTip = false const store = new vuex.Store({
state: {
show: false,
}
}); new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});

vuex的使用一
// 为了方便维护,我们通常把在src下面新建一个store文件夹,
// 然后在里面新建一个index.js
import Vue from 'vue'
import Vue_x from "vuex" Vue.use(Vue_x); export default new Vue_x.Store({
state: {
show: false,
},
});
// 那么main.js要改成
import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store" Vue.config.productionTip = false; new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
vuex的使用二
State
简而言之~~state是保存我们data中需要共享的数据。
由于Vuex的存储是响应式的,从store实例中读取状态的最简单的方式就是在计算属性中返回某个状态。
this.$store.state.count
// 创建一个组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count(){
return this.$store.state.count
}
}
};
组件中获取vuex中状态
Getter
有时候我们需要从store中的state中派生出一些状态,例如对数据进行简单的计算。
并且很多组件都需要用到此方法,我们要么复制这个函数,要么抽取到一个公共函数,多处导入。
我们vuex提供了更加方便的方法,getter ,它就像计算属性一样,getter的返回值会根据它的依赖被
缓存起来,只有它的依赖发生改变时,才会重新计算。
Getter会接收state作为其第一个参数:
import Vue from 'vue'
import Vue_x from "vuex" Vue.use(Vue_x); export default new Vue_x.Store({
state: {
count: 20,
},
// 通过 this.$store.getters.my_func
getters: {
my_func: function (state) {
return state.count * 2
}
}, });
Getter使用
Getter也可以接收getters为第二个参数:
import Vue from 'vue'
import Vue_x from "vuex" Vue.use(Vue_x); export default new Vue_x.Store({
state: {
count: 20,
},
// 通过 this.$store.getters.my_func
getters: {
my_func: function (state) {
return state.count * 2
},
// 通过 this.$store.getters.my_func_count
my_func_count: function (state, getters) {
return getters.my_func.length
}
}, });
Getter使用
Mutation
更改Vuex中的store中的状态的唯一方法是提交mutation。
每个mutation都有一个字符串的事件类型(type),和一个回调函数handler。
也就是说我们要触发mutation中定义的方法(type),然后才会执行这个方法(handler)。
这个方法就是我们更改状态的地方,它会接收state为第一个参数,后面接收其他参数:
import Vue from 'vue'
import Vue_x from "vuex" Vue.use(Vue_x); export default new Vue_x.Store({
state: {
count: 20,
},
// 需要通过 this.$store.commit('increment', 10)
mutations: {
increment (state, n) {
// 变更状态
state.count += n
}
} });
Mutation基本使用
Mutation需要遵守Vue的响应规则
既然vuex中的store中的状态是响应式的,那么当我们状态变更时,监视状态的vue组件也会更新。
这就意味着vuex中的mutation也需要与使用vue一样遵守一些注意事项:
-- 1,最好提前在你的store中初始化好所有的所需要的属性
-- 2,当对象需要添加属性时,你应该使用
-- Vue.set(obj, 'newProp', 123)
-- 以新对象代替老对象 state.obj = { ...state.obj, newProp: 123}
axios的简单使用
基于Promise的HTTP请求客户端,可以同时在浏览器和node.js使用。
使用npm安装axios
-- npm install axios -D
基本的配置
// main.js
import axios from "axios" Vue.prototype.$axios = axios // 组件中
methods: {
init () {
this.$axios({
method: "get",
url: "/user"
})
},
};
axios的基本配置
基本的使用
test(){
this.$axios.get(this.$store.state.apiList.course,{
params: {
id: 123,
}
}).then(function (response) {
// 请求成功回调函数
}).catch(function (response) {
// 请求失败的回调函数
})
}
get请求
test(){
this.$axios.post(this.$store.state.apiList.course,{
course_title: "Python",
course_price: "19.88"
}).then(function (response) {
// 请求成功回调函数
}).catch(function (response) {
// 请求失败的回调函数
})
}
post请求
function getCourse(){
return this.$axios.get('/course/12')
}
function getCourse_all() {
return this.$axios.get('/course')
}
this.$axios.all([getCourse_all(),getCourse()])
.then().catch()
发送多个并发请求
methods: {
init(){
var that = this
this.$axios.request({
url: that.$store.state.apiList.course,
method: 'get'
}).then(function (data) {
if (data.status === 200){
that.courseList = data.data
}
}).catch(function (reason) {
console.log(reason)
})
}
},
axios.request 本人喜欢的
Vuex+axios的更多相关文章
- vue全家桶项目搭建(vue-cli 2.9.6+vue-router+vuex+axios)
一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...
- 基于 vue+vue-router+vuex+axios+koa+koa-router 本地开发全栈项目
因为毕业设计要做基于Node服务器的项目,所以我就想着用刚学的vue作为前端开发框架,vue作为Vue.js应用程序的状态管理模式+库,axios基于promise用于浏览器和node.js的http ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- vue2.0+webpack+vuerouter+vuex+axios构建项目基础
前言 本文讲解的是vue2.0+webpack+vuerouter+vuex+axios构建项目基础 步骤 1.全局安装webpack,命令 npm install webpack -g 注意,web ...
- vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue(二十三)vuex + axios + 缓存 运用 (以登陆功能为例)
(一)axios 封装 (1)axios拦截器 可以在axios中加入加载的代码... (2)封装请求 后期每个请求接口都可以写在这个里面... (二)vuex user.js import { lo ...
- vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据
在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-se ...
随机推荐
- python之tkinter_1
以下内容来自:https://blog.csdn.net/wangyiyan315/article/details/16361065 from tkinter import * # 导入tkinter ...
- HDU 3853 LOOPS:期望dp【网格型】
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3853 题意: 有一个n*m的网格. 给出在每个格子时:留在原地.向右走一格,向下走一格的概率. 每走一 ...
- ubuntn下 apt的用法和yum的比较(转)
centos有yum安装软件,Ubuntu有apt工具. apt简单的来说,就是给Ubuntu安装软件的一种命令方式. 一.apt的相关文件 /etc/apt/sources.list 设置软件包的获 ...
- mvn使用记录
1. mvn dependency:copy-dependencies 会导出到targed/dependency 下面 2. mvn dependency:copy-dependencies -Do ...
- codeforces 706B B. Interesting drink(二分)
题目链接: B. Interesting drink 题意: 给出第i个商店的价钱为x[i],现在询问mi能在多少个地方买酒; 思路: sort后再二分; AC代码: #include <ios ...
- NO2:设置RedHat Linux下的samba开机启动
安装的samba默认不是开机启动的,这样每次都要进入系统人为启动,很不方便,当然系统肯定可以设置开机启动的. 因为我的是RedHat Linux系统,支持chkconfig命令直接配置,会简单些,其它 ...
- 【Lintcode】104.Merge k Sorted Lists
题目: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexit ...
- Xshell 主机和远程机之间的文件传输
(1)宿主机传输文件到远程机 方法1:直接拖动文件至xshell远程机命令行界面 方法2:远程机命令行输入rz打开文件选择框 (2)远程机传输文件到宿主机 远程机命令行界面上输入sz xxx.txt( ...
- Thrift之TProcess类体系原理及源码详细解析
我的新浪微博:http://weibo.com/freshairbrucewoo. 欢迎大家相互交流,共同提高技术. 之前对Thrift自动生成代码的实现细节做了详细的分析,下面进行处理层的实现做详细 ...
- 使用外网控制你的STM32单片机
转自:http://blog.csdn.net/xdxlove/article/details/50837459 本文章假设读者已经在STM32单片机上成功移植LWIP,且已经实现在局域网内控制STM ...