Vue 学习笔记 vue-router路由和前端状态管理

Vue 学习笔记十一、vue-router路由和前端状态管理

什么是路由：网址

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

确定视图加载的位置

11.2 vue-router路由的跳转

使用

实现跳转

11.3 vue-router路由参数的传递

必须在路由内加入路由的name

必须在path后加/: +传递的参数

传递参数和接收参数看下边代码


  HELLO WORLD

读取参数： $route.params.XXX
方式：/helloworld/你好世界


  HELLO WORLD

方式：/helloworld?name=XX&count=xxx

函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

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 客户端，它本身具有以下特征：

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

安装

npm install axios

引入加载到helloworld.vue

import axios from 'axios'

将axios全局挂载到VUE原型上

Vue.prototype.$http = axios;

发出请求以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)
  })
}
//es6
getData(){
  this.$http.get('https://cnodejs.org/api/v1/topics')
  .then(res=>{
    this.items = res.data.data
  })
  .catch(err=>{
    console.log(err)
  })
}

//两种传递参数的形式

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社区官方的API为例展开学习
获取主题列表API：https://cnodejs.org/api/v1/topics

参数：page页码
limit 每页显示的数量

11.4.2 Axios之post请求详解

// 为给定 ID 的 user 创建请求
使用传统的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传递数据有两种格式：

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

在axios中，post请求接收的参数必须是formdata所以我们必须处理post请求
使用qs插件转换x-www-form-urlencoded 格式成form-data

npm install qs
import qs from 'qs'

qs插件—qs.stringify

11.5 Vuex之store
用来管理状态，共享数据，在各个组件之间管理外部状态如何使用？

第一步：引入vuex，并通过use方法使用它

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

第二步：创建状态仓库
第三步：通过this.$sore.state.XXX直接拿到需要的数据

//创建状态仓库，注意Store,state不能改

var store = new Vuex.Store({
  state:{
    XXX：xxx
  }
})

//直接通过this.$store.state.XXX拿到全局状态

11.6 Vuex的相关操作

vuex状态管理的流程

view———>actions———–>mutations—–>state————>view
除了能够获取状态如何改变状态呢？

//创建状态仓库，注意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');
    }
  }
})
// 如何调用
this.$store.dispatch(XXX);

  getters:{
    getNum(state){
      return state.num > 0 ? state.num: 0;
    }
  }
  
this.$store.getters.getCount

注意：actions提交的是mutation,而不是直接变更状态
actions可以包含异步操作，但是mutation只能包含同步操作