Vue基础（四）

配置代理

方式一

在vue.config.js中添加如下配置

devServer:{proxy:"http://localhost:5000"
}

优点：配置简单，请求资源时直接发送给前端（8080）即可
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方式二

编写vue.config.js配置具体代理规则

优点：可以配置多个代理，且可以灵活的控制请求是否走代理
缺点：配置略微繁琐，请求资源时必须加前缀

vue-resource

//引入插件
import xxx from 'vue-resource'

插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式，适用于父组件===》子组件
2. 分类：默认插槽，具名插槽，作用域插槽
3. 使用方式：
   （1）默认插槽
   

（2）具名插槽

（3）作用域插槽
理解：数据在组件自身，但是根据数据生成的结构需要组件的使用者来决定（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

vuex

专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
使用：多个组件依赖同一状态；来组不同组件的行为需要变更同一状态

搭建vuex环境

1. 创建文件：src/store/index.js

import vue from 'vue'//引入vuex
import Vuex from 'vuex'
vue.use(Vuex)//准备action，用于响应组件中的动作
const actions ={}
//准备mutations,用于操作数据（state）
const mutations={}
//准备state，用于储存数据
const state ={}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})

2. 在main.js中创建vm时传入store配置项

import vue from  "vue"
import App from "./App.vue"
//引入vuex
import Vuex from 'vuex'
//引入store
import store from './store/index'vue.config.productionTip=false
vue.use(Vuex)new vue({render: h => h(App),store,beforeCreate() {vue.prototype.$bus=this},}).$mount('#app')

基本使用

组件中读取vuex中的数据：$store.state.sum组件中修改vuex中的数据：$store.dispatch(“actions中的方法名”,数据)或者$store.commit(“actions中的方法名”,数据)
若没有网络请求或其他业务逻辑，组件中也可以越过actions,直接缩写commit

store中的getters配置项

当state中的数据需要经过加工后再使用时，可以使用getters加工
在index.js文件里继续添加

//准备getters——用于将state中的数据进行加工
const getters = {bigSum(state){return state.sum*10}
}//创建并暴露
export default new Vuex.Store({·····getters
})

组件中读取数据

<h1>{{$store.getters.bigSum}}
</h1>

mapState与mapGetters

示例

<script>//引入import {mapState} from 'vuex'export default{cpmputed:{//借助mapState生成计算属性，从state中读取数据（对象写法）...mapState({he:sum,xuexiao:school,xueke:subject})//借助mapState生成计算属性，从state中读取数据（数组写法）...mapState('sum','school','subject'])}}
</script>

mapActions和mapMutations

//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象)...mapMutations({increment:'JIA',decremennt:'JIAN'})
//数组...mapState('JIA','JIAN'])
//借助mapActions生成对应的方法，方法中会调用dispatch去联系mutations(对象)...mapActions({increment:'JIA',decremennt:'JIAN'})

vuex的模块化

1. 目的：让代码更好维护，让多种数据分类更加明确。
2. 修改store.js

const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
}const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {countAbout,personAbout}
})

3. 开启命名空间后，组件中读取state数据：

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

4. 开启命名空间后，组件中读取getters数据：

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

5. 开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

6. 开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

路由

1. 一个路由就是一组映射关系（key-value）
2. key为路径，value可能是function或component

vue-router

vue的一个插件库，专门用来实现SPA应用

SPA应用

1. 单页web应用
2. 整个应用只有一个完整的页面
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4. 数据需要通过ajax请求获取

基本使用

1. 安装vue-router，命令：npm install vue-router@3
2. 应用插件：Vue.use(VueRouter)
3. 编写router配置项:

//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})//暴露router
export default router

4. 实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

<router-view></router-view>

注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹
2. 通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3. 每个组件都有自己的$route属性，里面储存着自己的路由信息
4. 整个应用只有一个router，可以通过组件的$router属性获取到

嵌套（多级）路由

1. 配置路由规则，使用children配置项：

routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写：/newscomponent:News},{path:'message',//此处一定不要写：/messagecomponent:Message}]}
]

2. 跳转（要写完整路径）：

<router-link to="/home/news">News</router-link>

路由传参路由的query参数

1. 传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法 -->
<router-link :to="{path:'/home/message/detail',query:{id:666,title:'你好'}}"
>跳转</router-link>

2. 接收参数：

$route.query.id
$route.query.title

命名路由

1. 作用：可以简化路由的跳转。
2. 如何使用
   a. 给路由命名：

{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' //给路由命名path:'welcome',component:Hello,}]}]
}

b. 简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
>跳转</router-link>

路由的params参数

1. 配置路由，声明接收params参数

{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
}

2. 传递参数

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带params参数，to的对象写法 -->
<router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3. 接收参数：

$route.params.id
$route.params.title

router-link的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace .......>News</router-link>