vue-router 路由和前端状态管理

vue-router

Vue Router 是 Vue.js 官方的 路由管理器。
由前端来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。

优点：体验好，不需要每次从服务器获取全部，快速展现给用户；
缺点：不利于SEO；使用浏览器的前进，后退键的时候会重新发送请求，没有合理的利用缓存；单页面无法记住之前滚动的位置，无法在前进和后退的时候记住滚动的位置。

路由的基本加载

简单四步走

安装

npm install --save vue-router

引用

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: ''
})

确定视图加载的位置

路由的跳转

路由参数的传递

使用 params

···/helloworld/你好世界
路由：

必须在路由内加入路由的 name
必须在 path 后加 /: +传递的参数

export default new router({
  routes: [{
    name: 'helloworld',
    path: '/helloworld/:worldmsg', // 指定要跳转的路径
    component: HelloWorld // 指定要跳转的组件
  }, {
    name: 'helloearth',
    path: '/helloearth/:earthmsg',
    component: HelloEarth
  }]
})

传递参数：


  HELLO WORLD

接收参数：

$route.params.earthmsg

使用 query

···/helloworld?name=xxx&count=yyy
路由：
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [{
    path: '/search', 
    component: SearchUser, 
    props: (route) => ({msg: route.query.msg}) 
  }]
})

传递参数：


  HELLO WORLD

接收参数：

{{msg}}

Axios

axios的简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

安装

npm install axios

引入加载

import axios from 'axios'

将 axios 全局挂载到 VUE 原型上

Vue.prototype.$http = axios

get 请求

getData(){
  this.$http.get('https://cnodejs.org/api/v1/topics', {
    params: {
      page: 1,
      limit: 10
    }
  })
    .then(response => {
      this.items = response.data.data
    })
    .catch(error => {
      console.log(error)
    })
}

两种传递参数的形式：

axios.get('https://cnodejs.org/api/v1/topics', {
    params: {
      page: 1,
      limit: 10
    }
  })

axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=10')

post 请求

POST 传递数据有两种格式：

formdata?page=1&limit=10
x-www-form-urlencoded { page: 1, limit: 10 }

在axios中，post请求接收的参数必须是 formdata，
需要使用 qs 插件的 qs.stringify 方法。

postData(){
  this.$http.post(url, qs.stringify({
    page: 1,
    limit: 10
  }))
    .then(response => {
      this.items = response.data.data
    })
    .catch(error => {
      console.log(error)
    })
}

Vuex

store

用来管理状态，共享数据，在各个组件之间管理外部状态。
如何使用 Vuex 获取状态？
第一步：引入 vuex，并通过 use 方法使用它。

import Vuex from 'vuex'
Vue.use(Vuex)

第二步：创建状态仓库。

var store = new Vuex.Store({
  state: {
    XXX: xxx
  }
})
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: ''
})

第三步：通过 this.$store.state.XXX 直接拿到需要的数据（获取状态）。

Vuex 的相关操作

如何改变状态？

mutations

var store = new Vuex.Store({
  state: {
    num: 88
  },
  mutations: {
    // 定义状态改变函数
    increase(state){
      state.num++
    },
    decrease(state){
      state.num--
    }
  }
})

通过 this.$store.commit('increase') 调用状态改变函数。

actions

var store = new Vuex.Store({
  state: {
    num: 88
  },
  mutations: {
    // 定义状态改变函数
    increase(state){
      state.num++
    },
    decrease(state){
      state.num--
    }
  },
  actions: {
    // context 为上下文对象
    increaseAction(context){
      // actions 中只能对 mutation 进行操作，不直接变更状态
      context.commit('increase')
    }
  }
})

通过 this.$store.dispatch('increaseAction') 调用。
actions 可以包含异步操作，但是 mutations 只能包含同步操作。

getters

var store = new Vuex.Store({
  state: {
    num: 88
  },
  ···
  getters: {
    getNum(state){
      return state.num > 0 ? state.num : 0
    }
  }
})

通过 this.$store.getters.getNum 拿到处理后的数据。