vue-router路由和前端狀態管理

vue-router路由基本加載

簡單四步走

1. 安裝

npm install --save vue-router
複製代碼

2. 引用

import router from 'vue-router'
Vue.use(router)
複製代碼

3. 配置路由文件，並在vue實例中注入

var rt = new router({
routes:[{
    path:'/',//指定要跳轉的路徑
    component:HelloWorld//指定要跳轉的組件
}]
})
new Vue({
    el: '#app',
    router:router,
    components: { App },
    template: '<App/>'
})
複製代碼

4. 肯定視圖加載的位置

<router-view></router-view>
複製代碼

vue-router路由的跳轉

<router-link to="/"></router-link>
<template>
<ul>
    <li>
    <router-link to="/helloworld">HELLO WORLD</router-link>
    </li>
    <li>
    <router-link to="/helloearth">HELLO EARTH</router-link>
    </li>
</ul>
</template>
複製代碼

vue-router路由參數的傳遞

1.必須在路由內加入路由的name

2.必須在path後加/: +傳遞的參數

<router-link
:to="{name: helloearth,params:{msg: 只有一個地球}}">
HELLO WORLD
</router-link>
讀取參數： $route.params.XXX
方式：===/helloworld/你好世界
<router-link
:to="{path: '/helloearth',query:{msg: 只有一個地球}}">
HELLO WORLD
</router-link>
方式：===/helloworld?name=XX&count=xxx
函數模式
複製代碼

Axios之get請求詳解

axios的簡介：

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF

1. 安裝

npm install axios
複製代碼

2. 引入加載

import axios from 'axios'
複製代碼

3. 將axios全局掛載到VUE原型上

Vue.prototype.$http = axios;
複製代碼

4. 發出請求 以cnode社區API爲例子

// 爲給定 ID 的 user 建立請求
使用傳統的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)
    })
    }
    // 可選地，上面的請求能夠這樣作
    兩種傳遞參數的形式
    axios.get('/user', {
        params: {
        ID: 12345
        }
    })
    axios.get('/user', {
    ID: 12345
})
---------------------------------
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')

複製代碼

使用CNODE社區官方的API爲例展開學習

獲取主題列表API：cnodejs.org/api/v1/topi…

參數：page頁碼

limit 每頁顯示的數量

Axios之post請求詳解

// 爲給定 ID 的 user 建立請求
使用傳統的function
getData(){
    var self = this;
    this.$http.post(url,qs.stringify({
        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傳遞數據有兩種格式：

若是用qs.stringify對請求的參數進行處理，那麼格式就：form-data ?page=1&limit=48

若是不用qs.stringify對請求的參數進行處理，那麼格式就是：x-www-form-urlencoded { page: 1,limit: 10 }

在axios中，post請求接收的參數必須是form-data

qs插件 —-> qs.stringify

cnpm install qs
複製代碼

Vuex之store

用來管理狀態，共享數據，在各個組件之間管理外部狀態 如何使用？ 第一步：引入vuex，並經過use方法使用它 第二步： 建立狀態倉庫 第三步：經過this.$sore.state.XXX直接拿到須要的數據

//建立狀態倉庫，注意Store,state不能改
var store = new Vuex.Store({
    state:{
    XXX：xxx
    }
})
//直接經過this.$sore.state.XXX拿到全局狀態
複製代碼

Vuex的相關操做

actions是無關緊要的，可是若是有異步的操做必須走actions

vuex狀態管理的流程 view———>(actions)———–>mutations—–>state————>view

actions是無關緊要的，actions裏面執行的是一些異步的操做，對狀態state直接進行操做的是mitation而不是actions，若是有actions就走actions，若是沒有就直接走mutations

此外，mucations裏面的函數接受的參數直接是state而actions裏面的函數接受的是上下文對象context

除了可以獲取狀態如何改變狀態呢？
//建立狀態倉庫，注意Store,state不能改
var store = new Vuex.Store({
    state:{
    XXX：xxx
},
    mutations:{
    }
    })
    如何調用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');
        }
    }
})
如何調用actions----->
this.$store.dispatch(XXX);
getters:{
}
this.$store.getters.getCount
複製代碼

注意：actions提交的是mutation,而不是直接變動狀態 actions能夠包含異步操做，可是mutation只能包含同步操做