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的更多相关文章
- Vuex以及axios 看这个
vuex -- 安装 npm i vuex -- 配置 -- 导入vuex import vuex from "vuex" -- vue使用vuex ...
- Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
准备 利用vue-cli脚手架创建项目 进入项目安装vuex.axios(npm install vuex,npm install axios) axios配置 项目中安装axios模块(npm in ...
- vue全家桶router、vuex、axios
main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...
- 基于Vue+Vuex+Vue-Router+axios+mint-ui的移动端电商项目
第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/e ...
- 使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架
一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是 ...
- 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...
- Vuex、axios、跨域请求处理和import/export的注意问题
一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...
- Vuex与axios介绍
Vuex集中式状态管理里架构 axios (Ajax) Vuex集中式状态管理架构 -简单介绍: vuex是一个专门为Vue.js设计的集中式状态管理架构. 我们把它理解为在data中需要共享给其他组 ...
- Vuex、axios以及跨域请求处理
一.Vuex 1.介绍 vuex是一个专门为Vue.js设计的集中式状态管理架构. 对于状态,我们把它理解为在data中需要共享给其他组件使用的部分数据. Vuex和单纯的全局对象有以下不同: 1. ...
随机推荐
- 渗透测试_利用Burp爆破用户名与密码
burp 全称 Burp Suite, 是用于攻击web 应用程序的集成平台.它包含了许多工具,可以抓包可以爆破也可以扫描漏洞. 主要组件如下: Proxy——是一个拦截HTTP/S的代理服务器,作为 ...
- 字符串的查找KMP
基本思想,当出现不匹配的时候,就知晓一部分文本内容(因为在匹配失败前已经发生匹配) P[0 ~ k-1] == P[j-k ~ j-1] //KMP #include<iostream> ...
- c++入门之内置数组和array比较
array是C++11中新提出来的容器类型,与内置数组相比,array是一种更容易使用,更加安全的数组类型,可以用来替代内置数组.作为数组的升级版,继承了数组最基本的特性,也融入了很多容器操作,下面介 ...
- Mike and gcd problem CodeForces - 798C (贪心思维+数论)
题目链接 比较棒的一道题, 题意: 给你一个N个数的数组,让你用尽量少的操作使整个数组的gcd大于1,即gcd(a1 ,a2,,,,an) > 1 如果可以输出YES和最小的次数,否则输出NO ...
- 实分析p78 两个解释
1. 是为了存在一个充分大的J,使得,当j大于J.会满足.x是满足能一致收敛到f(x)自变量取得集合,, 是为了允许有限个 前面的不成立,是对所有的k都成立,让k取很大,可以很小 2.是函数列收敛到f ...
- java.lang.LinkageError: JAXB 2.0 API is being loaded from the bootstrap classloader
我的解决办法: 1.如果是application工程,则在程序中打印出 system.out.println(System.getProperty("java.endo ...
- 认识Debian
Debian -- 通用操作系统https://www.debian.org/ DebianStretch - Debian Wikihttps://wiki.debian.org/DebianStr ...
- vue路由的知识点
this.$router.push({name:'login',query:{name:'ww',age:18}}) 传数据 this.$route.query 拿数据 meta:{ "dl ...
- [转帖]一个FORK的面试题
一个FORK的面试题 https://coolshell.cn 搞不懂 fork 的含义. Linux 里面的线程不是教科书上面的标准的线程 好像用 父子进程来进行 模拟线程的处理 父子线程应该共享 ...
- jenkins配置SSH远程服务器连接
之前用jenkins做了一个自动发布测试,配置任务的Post Steps时,选择的是执行shell命令.如下图: 这是在本192.168.26.233服务器上测试的,此服务器上运行jenkins,to ...