前端路由和vuex状态管理
一、前端路由的基本用法
1.安装
npm install --save vue-router
2、引用
import router from 'vue-router' //引入路由
Vue.use(router) // vue 提供的使用路由方法
3、配置路由文件，并在vue实例中注入
var rt = new router({
routes: [{
path: '/',//指定要跳转的路径
component: HelloWorld//指定要跳转的组件
}]
})
new Vue({
el: '#app',
router: rt, // 在vue实例中注入路由
components: { App },
template: '<App/>'
})
4、 确定视图加载的位置
<router-view></router-view>
二、vue-router路由的跳转
<router-link to="/"></router-link>
to后面接的是需要跳转的路径，如下：
<router-link to="/helloworld">HELLO WORLD</router-link>
三、 vue-router路由参数的传递
1、必须在路由内加入路由的name
export default new router({
routes: [
{
name:'helloworld', //在路由内加入路由的name,名字可以自定义
path: '/HelloWorld/:worldmsg',
component: HelloWorld
},
]
})
2、必须在path后加/: +传递的参数
export default new router({
routes: [
{
name:'helloworld',
path: '/HelloWorld/:worldmsg', //必须在path后加 /: +传递的参数
component: HelloWorld
},
]
})
- 传递参数
首先在:to中引用前面定义的name名字，其中传递参数命名params是固定的设置，不能更改
<ul>
<li>
/* 传递参数 */
<router-link :to="{name:'helloworld',params:{worldmsg:'我的世界'}}">Hello World</router-link>
</li>
</ul>
4、接收参数
读取参数： $route.params.XXX
<template>
<div class="hello">
<h3>{{$route.params.worldmsg}}</h3> //接收参数
</div>
</template>
补充一点：这是另外一种传递参数和接收参数方法，目前用的不多，后续可以再详细了解。
<router-link
:to="{path: '/helloearth',query:{msg: 只有一个地球}}">HELLO WORLD</router-link>
方式：===/helloworld?name=XX&count=xxx
函数模式
四、 Axios之get请求详解
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;
- 发出请求 以cnode社区API为例子
methods:{
getdata:function(){
var self =this
this.$http.get('https://cnodejs.org/api/v1/topics',{
params:{ //还可以用下面提到第二种传递参数形式
page:1,
limit:15
}
})
.then(function(res){ //then()是promise中的方法，成功则调用，详细可以看ES6
console.log(res)
self.items=res.data.data
})
.catch(function(err){ //catch()是promise中的方法，失败时候调用，详细可以看ES6
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：https://cnodejs.org/api/v1/topics
参数：page页码、limit 每页显示的数量
五、 Axios之post请求详解
post请求和get请求没有太大区别，在get请求基础上安装一个插件qs插件，利用qs.stringify()方法传递参数。
1、安装
npm install qs
2、引入
import qs from 'qs'
postdata:function(){
var self =this
this.$http.post(url,qs.stringify({
page:1,
limit:20
}))
.then(function(res){
console.log(res)
self.items=res.data.data
})
.catch(function(err){
console.log(err)
})
},
POST传递数据有两种格式：
form-data ?page=1&limit=48
x-www-form-urlencoded { page: 1,limit: 10 }
六、 初识Vuex之store
用来管理状态，共享数据，在各个组件之间管理外部状态
第一步：项目安装vuex插件
npm i vuex
第二步：引入vuex，并通过use方法使用它
import Vuex from 'vuex'
Vue.use(Vuex)
第三步： 创建状态仓库
//创建状态仓库，注意第二个Store是大写的不能改，,state也是不能改
var store = new Vuex.Store({
state:{
XXX：xxx
}
})
第四步：注入Vue实例当中
new Vue({
el: '#app',
router,
store, //注入store,当键名(key)和值(value)名字一样可以这样缩写
components: { App },
template: '<App/>'
})
第五步：通过this.$sore.state.XXX拿到全局状态
computed:{
getOutterNum:function(){
return this.$store.state.XXX
}
}
七、Vuex的相关操作
vuex状态管理的流程
view——>actions—–>mutations—–>state——>view
一、
方法一、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
var store = new Vuex.Store({
state:{
num:88
},
mutations:{ //定义状态改变函数
increase:function(state){
state.num++
},
decrease:function(state){
state.num--
}
}
})
利用commit来触发mutations函数
methods:{
sadd:function(){
this.$store.commit('increase') //commit方法里面是mutations定义的函数名
}
},
方法二：
利用actions中对mucations进行操作，间接对state进行修改
mutations:{
increase:function(state){
state.num++
},
decrease:function(state){
state.num--
}
},
actions:{ //actions中只能对mucations进行操作
//context为上下文对象
decreaseActions:function(context){
context.commit('decrease') //decrease方法是mucations中定义的方法
}
}
})
利用dispatch来触发actions函数
saddActions:function(){
//dispatch方法里面是actions定义的函数名
this.$store.dispatch('decreaseActions')
}
mucations和actions两者之间区别
1、传递参数不一样，前者传递是state，后者传递是context。
2、调用的方式不一样，前者靠this.$store.commit('xxx')触发，后者靠this.$store.dispatch('xxx')触发。
3、actions可以包含异步操作，但是mutation只能包含同步操作
actions:{
decreaseActions:function(context){
setTimeout(() => { //延时一秒的异步操作
context.commit('decrease')
}, 1000);
}
}
二、getters是vuex中的一个属性，主要作用于vue中的计算属性（computed）类似，用来存放一些经过修改的数值
getters:{
getNum:function(state){
return state.num>0? state.num:0
}
}
在调用getters中的内容是使用$store.getters.函数名进行调用
computed:{
getParentNum:function(){
return this.$store.getters.getNum //getNum是getter里面定义方法
}
}
