Vue.js 创建一个 CNODE 社区(7)
vue-router / Axios / vuex
学习 vue.js 中的 vue-router / axios / vuex。
demo：
代码链接：GitHub
预览链接：Git Pages
vue-router
vue-router 官方文档
实现：当用户输入不同的 url 时，切换/跳转不同的组件。
vue-router 基本加载
- 安装
在项目中运行 cnpm install --save vue-router
- 引用
在项目的入口文件(可以在 /build/webpack.base.config.js 中查看，即 entry 中的文件)中引用：
import router from 'vue-router'
Vue.use(router)
- 配置路由文件，并在vue实例中注入
// 配置路由文件
let rt = new router(
//请注意这里，是 routes ,不是 router，更不是 routers！
routes:[
{
path:'/hello',
component:HelloWorld
}
]
})
// 在 vue 实例中注入
var app = new Vue({
el:'#app',
router:rt
})
- 确定视图加载的位置
<router-view></router-view>
vue-router 路由跳转
但是，如果要用户自己输入 url 进行切换是不现实的，所以:
1.我们创建了一个组件A(新建 .vue 文件)，里面包含了两个按钮，然后输出(export)；
2.先把组件A 引入(import)并挂载到 vue 实例上，然后在页面中渲染出来；
3.再新建两个组件 B1 和 B2 ，都在负责 router 的 index.js 中引入、配置路由文件、输出(export)、并在 vue 实例中注入；
// index.js
export default new router({
// 请注意这里，是 routes ,不是 router，更不是 routers！
routes:[
{
path:'/world',
component:HelloWorld
},
{
path:'/earth',
component:HelloEarth
}
]
})
// main.js
import rt from './router/index'
new Vue({
...
router:rt
...
})
4.确定视图加载的位置：
<router-view></router-view>
5.在组件A 的两个按钮中分别添加 router-link，实现跳转：
<ul>
<li><h3><router-link to='/world'>To World</router-link></h3></li>
<li><h3><router-link to='/earth'>To Earth</router-link></h3> </li>
</ul>
这其中 router-link 和配置 routes 是很重要的。
通过路由传递参数
1.必须在路由内加入路由的name
2.必须在path后加/: +传递的参数
// index.js
export default new router({
// 请注意这里，是 routes ,不是 router，更不是 routers！
routes:[
{
name:'world',
path:'/world/:myMsg',
component:HelloWorld
},
{
name:'earth',
path:'/earth/:myMsg',
component:HelloEarth
}
]
})
3.在 router-link 添加参数
<ul>
<li><h3><router-link :to='{name:"world",params:{myMsg:"你好世界"}}'>To World</router-link></h3></li>
<li><h3><router-link :to='{name:"earth",params:{myMsg:"你好地球"}}'>To Earth</router-link></h3> </li>
</ul>
<!-- 或者可以直接这样 -->
<ul>
<li><h3><router-link :to='{path:"/world",query:{myMsg:"你好世界"}}'>To World</router-link></h3></li>
<li><h3><router-link :to='{path:"/earth",query:{myMsg:"你好地球"}}'>To Earth</router-link></h3> </li>
</ul>
4.读取参数
只有在指定的组件内才可以使用：
{{ $route.params.myMsg}}
这样页面渲染的时候就可以拿到 router-link 中传递的参数了。
Axios
Axios 官方文档
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
使用 axios
- 安装
运行 cnpm install axios
- 引入
import axios from 'axios'
- 将axios全局挂载到 VUE 原型上
Vue.prototype.$http = axios
- axios 中的 GET
<button @click='getData'>GET 请求</button>
<ul>
<li v-for='item in items'>{{item.title}}</li>
</ul>
data () {
return {
items:[]
}
},
methods:{
getData:function(){
// .then 不用箭头函数的话，也可以声明 let self = this，然后赋值给 self.items
this.$http.get('https://cnodejs.org/api/v1/topics',{
// 传入参数
params:{
page:1,
limit:10
}
})
.then((response)=>{
this.items = response.data.data
})
.catch((err)=>{
console.log(err)
})
}
}
点击按钮后，我们向 https://cnodejs.org/api/v1/topics 发送请求，将获取的数据赋值给 data 中的 items，然后在页面中通过 v-for 遍历 items，将数据渲染出来。
- axios 中的 POST
POST传递数据有两种格式：
form-data ?page=1&limit=48
x-www-form-urlencoded { page: 1,limit: 10 }
在axios中，post请求接收的参数必须是form-data，所以要使用 qs 库对 post 的数据进行处理。
关于 axios 中的 post ，详情可以参考这篇博文。
因为params是添加到url的请求字符串中的，用于get请求；而data是添加到请求体（body）中的， 用于post请求。
<button @click='postData'>GET 请求</button>
import qs from 'qs'
methods:{
postData:function(){
this.$http.post(url,qs.stringify({
page:1,
limit:10
})
)
.then((data)=>{
console.log(data)
})
.catch((err)=>{
console.log(err)
})
}
}
vuex
vuex 官方文档
Vuex 是什么：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
什么情况下需要用到 Vuex：
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。
- 基本用法
第一步：引入vuex，并通过use方法使用它
运行 cnpm i vuex 安装 Vuex
import Vuex from 'vuex'
Vue.use(Vuex)
第二步： 创建状态仓库
let store = new.Vuex.Store({
state{
xxx:XXX
}
})
第三步：通过 this.$store.state.xxx 直接拿到需要的数据
- 核心用法
vuex状态管理的流程
view ——> actions —–> mutations —–> state ——> view
用 Vue 官方文档的一张图表示就是：
let store = new Vuex.Store({
// 创建全局状态，通过 this.$store.state.num 调用
state:{
num:666
},
// 改变全局状态，通过 this.$store.commit('increase') 调用
mutations:{
increase(state){
state.num = state.num + 20
},
decrease(state){
state.num = state.num - 20
}
},
// 提交的是 mutation ，而不是直接变更状态，但是可以执行异步操作，且传入的参数也不同，通过 this.$store.dispatch('addAction') 调用
actions:{
addAction(context){
setTimeout(()=>{
context.commit('increase')
},2000)
},
decreaseAction(context){
setTimeout(()=>{
context.commit('decrease')
},2000)
}
},
// 相当于获取状态的过滤器，通过 this.$store.getters.getNum 获取全局状态
getters:{
getNum(state){
return state.num>0?state.num:0
}
}
})
actions 和 mutation 的区别：
actions 提交的是 mutation,而不是直接变更状态
actions 可以包含异步操作，但是 mutation 只能包含同步操作
