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 只能包含同步操作