Vue 學習筆記十一、vue-router路由和前端狀態(tài)管理
什么是路由：網(wǎng)址
11.1 vue--router路由基本加載
/Users/mac/Desktop/日記本1. 安裝
npm install --save vue-router
- 引用
//main.js
import router from 'vue-router'
Vue.use(router)
- 配置路由文件，并在vue實例中注入
var rt = new router({
routes:[{
path:'/',//指定要跳轉的路徑
component:HelloWorld//指定要跳轉的組件
}]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: '<App/>'
})
- 確定視圖加載的位置
<router-view></router-view>
11.2 vue--router路由的跳轉
使用
<router-link to="/"></router-link>
實現(xiàn)跳轉
<template>
<ul>
<li>
<router-link to="/helloworld">HELLO WORLD</router-link>
</li>
<li>
<router-link to="/helloearth">HELLO EARTH</router-link>
</li>
</ul>
</template>
11.3 vue--router路由參數(shù)的傳遞
- 必須在路由內(nèi)加入路由的name
- 必須在path后加/: +傳遞的參數(shù)
- 傳遞參數(shù)和接收參數(shù)看下邊代碼
<router-link
:to="{name: helloearth,params:{msg: 只有一個地球}}">
HELLO WORLD
</router-link>
讀取參數(shù)： $route.params.XXX
方式：/helloworld/你好世界
<router-link
:to="{path: '/helloearth',query:{msg: 只有一個地球}}">
HELLO WORLD
</router-link>
方式：/helloworld?name=XX&count=xxx
函數(shù)模式
你可以創(chuàng)建一個函數(shù)返回 props。這樣你便可以將參數(shù)轉換成另一種類型，將靜態(tài)值與基于路由的值結合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({
query: route.query.q }) }
]
})
11.4.1 Axios之get請求詳解
axios的簡介：
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特征：
從瀏覽器中創(chuàng)建 XMLHttpRequest
從 node.js 發(fā)出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數(shù)據(jù)
取消請求
自動轉換JSON數(shù)據(jù)
客戶端支持防止 CSRF/XSRF
安裝
npm install axios
引入加載到helloworld.vue
import axios from 'axios'
將axios全局掛載到VUE原型上
Vue.prototype.$http = axios;
發(fā)出請求 以cnode社區(qū)API為例子
// 為給定 ID 的 user 創(chuàng)建請求
//使用傳統(tǒng)的function
getData(){
var self = this;
this.$http.get('https://cnodejs.org/api/v1/topics')
.then(function (res) {
//此處的this指向的不是當前vue實例
self.items = res.data.data
console.log(res.data.data)
})
.catch(function (err) {
console.log(err)
})
}
//es6
getData(){
this.$http.get('https://cnodejs.org/api/v1/topics')
.then(res=>{
this.items = res.data.data
})
.catch(err=>{
console.log(err)
})
}
//兩種傳遞參數(shù)的形式
getData(){
this.$http.get('https://cnodejs.org/api/v1/topics',{
params:{
page:1,
limit:10
}
})
.then(res=>{
this.items = res.data.data
})
.catch(err=>{
console.log(err)
})
}
//或者
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
使用CNODE社區(qū)官方的API為例展開學習
獲取主題列表API：https://cnodejs.org/api/v1/topics
參數(shù)：page頁碼
limit 每頁顯示的數(shù)量
11.4.2 Axios之post請求詳解
// 為給定 ID 的 user 創(chuàng)建請求
使用傳統(tǒng)的function
getData(){
var self = this;
this.$http.post(url,{
page:1,
limit:10
})
.then(function (res) {
//此處的this指向的不是當前vue實例
self.items = res.data.data
console.log(res.data.data)
})
.catch(function (err) {
console.log(err)
})
}
POST傳遞數(shù)據(jù)有兩種格式：
form--data ?page=1&limit=48
x--www--form--urlencoded { page: 1,limit: 10 }
在axios中，post請求接收的參數(shù)必須是form-data所以我們必須處理post請求
使用qs插件轉換x--www--form--urlencoded 格式成form--data
npm install qs
import qs from 'qs'
qs插件—-qs.stringify
11.5 Vuex之store
用來管理狀態(tài)，共享數(shù)據(jù)，在各個組件之間管理外部狀態(tài)如何使用？
第一步：引入vuex，并通過use方法使用它
import Vuex from './vuex'
Vue.use(Vuex)
第二步： 創(chuàng)建狀態(tài)倉庫
第三步：通過this.$sore.state.XXX直接拿到需要的數(shù)據(jù)
//創(chuàng)建狀態(tài)倉庫，注意Store,state不能改
var store = new Vuex.Store({
state:{
XXX：xxx
}
})
//直接通過this.$store.state.XXX拿到全局狀態(tài)
11.6 Vuex的相關操作
vuex狀態(tài)管理的流程
view———->actions———–>mutations—–>state————->view
除了能夠獲取狀態(tài)如何改變狀態(tài)呢？
//創(chuàng)建狀態(tài)倉庫，注意Store,state不能改
var store = new Vuex.Store({
state:{
XXX：xxx
},
mutations:{
}
})
this.$store.commit(XXX);
// 此處的XXX是你在mucations中定義的方法名
var store = new Vuex.Store({
state:{
XXX：xxx
},
mucations:{
a:function(state){
}
},
actions:{
b:function(context){
context.commit('a');
}
}
})
// 如何調(diào)用
this.$store.dispatch(XXX);
getters:{
getNum(state){
return state.num > 0 ? state.num: 0;
}
}
this.$store.getters.getCount
注意：actions提交的是mutation,而不是直接變更狀態(tài)
actions可以包含異步操作，但是mutation只能包含同步操作
