axios有点类似ajax,主要是发送请求,获得数据,然后渲染到页面。vuex主要是实现组件间数据交换的,调度数据。到此,vue.js就基本实现了所有前端的功能,好像零碎的东西也不少啊,比起wordpress建站神器,确实要复杂蛮多的。不过,相对的,功能也要强不少。
axios
http://www.axios-js.com/zh-cn/docs
https://www.kancloud.cn/yunye/axios/234845
cnpm install axios --save
import axios from 'axios'
methods:{
get(){
axios.get('http://vue.studyit.io/api/getlunbo').then(res => {
console.log(res.data)
}).catch(function (error) {
console.log(error)
})
}
}
全局设置 main.js
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
vuex
vue配套的公共数据管理工具,它可以把一些共享的数据保存到vuex中
cnpm install vuex --save
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
state: {
count: 0 //this.$store.state.count调用数据
},
mutations: {
increment(state){
state.count ++
}, //this.$store.commit('increment')调用方法
getters: {
optCount: function (state) {
return state.count //只对外提供数据,$store.getters.optCount
}
}
}
})
#挂载到VM实例上
var app = new Vue({
el: '#app',
store
})
// 总结:
// 1. state中的数据,不能直接修改,如果想要修改,必须通过 mutations
// 2. 如果组件想要直接 从 state 上获取数据: 需要 this.$store.state.***
// 3. 如果 组件,想要修改数据,必须使用 mutations 提供的方法,需要通过 this.$store.commit('方法的名称', 唯一的一个参数)
// 4. 如果 store 中 state 上的数据, 在对外提供的时候,需要做一层包装,那么 ,推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.***
网络研习社系列文章:
- 微信小程序开发初体验 / 网络研习社#1
- 新技能:小程序空间当图床! / 网络研习社#2
- 小程序云开发中数据的传递形式 / 网络研习社#3
- 如何突破coreldraw的网络限制 / 网络研习社#4
- 我师网小程序初发布,大家多多指教 / 网络研习社#5
- 用github 做文件目录 / 网络研习社#6
- LNMP环境一键安装(一) / 网络研习社#7
- LNMP环境自定义安装(二) / 网络研习社#8
- 利用github做免费博客 / 网络研习社#9
- Nodejs,打开服务器黑匣子 / 网络研习社#10
- 一入前端深似海,聊聊vue.js / 网络研习社#11
- 我们想做的,vue都帮我们做好了 / 网络研习社#12
- vue和小程序一家亲 / 网络研习社#13
- vue的组件面面观 / 网络研习社#14
- vue-router路由的参数和设计 / 网络研习社#15
- webpack前端神器 / 网络研习社#16
- 用FileZilla作FTP文件服务器 / 网络研习社#17
- 连接FTP文件服务器的方法/ 网络研习社#18