前端开发学习之【Vue】-下

文章目录

- Vuex
- - - 1.概述
    - 2.使用
    - 3.四个 map 方法
    - 4.模块化+命名空间
- Vue Router
- - - 1.SPA
    - 2.路由
    - 3.基本使用
    - 4.多级路由
    - 5.路由传参query参数
    - 6.命名路由
    - 7.路由传参params参数
    - 8.路由的props配置
    - 9.路由跳转方式
    - 10.缓存路由
    - 11. activated deactivated生命周期钩子
    - 12.路由守卫
    - 13.路由器的两种工作模式
- 上线项目

Vuex

1.概述

Vuex 是什么
概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

什么时候使用 Vuex：

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

原理：
在这里插入图片描述

vuex包含三个主要组成部分：actions、mutations、state，它们都有store管理；
vue组件通过dispatch函数发送给vuex以操作名称和操作数，然后actions接收到之后调用commit函数发送给mutations；（存在actions是为了需要发送ajax请求才知道操作数的情况），当然已知操作数可以直接调用commit而不调用dispatch；
mutations调用mutate函数传输计算后的数据给state；
state调用render函数将数据传递给vc。

2.使用

使用vuex：

下载vuex：npm i vuex；
创建src/store/index.js该文件用于创建Vuex中最为核心的store：

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

在src/main.js中创建vm时传入store配置项：


import Vue from 'vue'
import App from './App.vue'
import store from './store'	// 引入storeVue.config.productionTip = falsenew Vue({el: '#app',render: h => h(App),store,										// 配置项添加storebeforeCreate() {Vue.prototype.$bus = this}
})

编写代码：
Vuex的基本使用：
①初始化数据state，配置actions、mutations，操作文件store.js
②组件中读取vuex中的数据$store.state.数据
③组件中修改vuex中的数据$store.dispatch('action中的方法名',数据) 或$store.commit('mutations中的方法名',数据)
若没有网络请求或其他业务逻辑，组件中也可越过actions，即不写dispatch，直接编写commit

import Vue from 'vue'
import Vuex from 'vuex'	// 引入VuexVue.use(Vuex)	// 应用Vuex插件// 准备actions——用于响应组件中的动作
const actions = {/* jia(context,value){console.log('actions中的jia被调用了')context.commit('JIA',value)},jian(context,value){console.log('actions中的jian被调用了')context.commit('JIAN',value)}, */jiaOdd(context,value){	// context 相当于精简版的 $storeconsole.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)}
}
// 准备mutations——用于操作数据（state）
const mutations = {JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}
}
// 准备state——用于存储数据
const state = {sum:0 //当前的和
}// 创建并暴露store
export default new Vuex.Store({actions,mutations,state,
})

使用：

 $store.state.sum

getters配置项：
概念：当state中的数据需要经过加工后再使用时，可以使用getters加工，相当于全局计算属性
在store.js中追加getters配置：

const getters = {bigSum(state){return state.sum * 10}
}// 创建并暴露store
export default new Vuex.Store({......getters
})

3.四个 map 方法

mapState方法：用于帮助映射state中的数据为计算属性，相当于完成一个等于

computed: {// 借助mapState生成计算属性：sum、school、subject（对象写法一）...mapState({sum:'sum',school:'school',subject:'subject'}),// 借助mapState生成计算属性：sum、school、subject（数组写法二）...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助映射getters中的数据为计算属性

computed: {//借助mapGetters生成计算属性：bigSum（对象写法一）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性：bigSum（数组写法二）...mapGetters(['bigSum'])
},

mapActions方法：用于帮助生成与actions对话的方法，即包含$store.dispatch(xxx)的函数

methods:{//靠mapActions生成：incrementOdd、incrementWait（对象形式）...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//靠mapActions生成：incrementOdd、incrementWait（数组形式）...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助生成与mutations对话的方法，即包含$store.commit(xxx)的函数

methods:{//靠mapActions生成：increment、decrement（对象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//靠mapMutations生成：JIA、JIAN（对象形式）...mapMutations(['JIA','JIAN']),
}

mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

组件：

<template><div><h1>当前求和为：{{ sum }}</h1><h3>当前求和的10倍为：{{ bigSum }}</h3><h3>我是{{ name }}，我在{{ school }}学习</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="addOdd(n)">当前求和为奇数再加</button><button @click="addWait(n)">等一等再加</button></div>
</template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'	//🔴export default {name: 'Count',data() {return {n:1, //用户选择的数字}},computed: {		...mapState(['sum','school','name']),...mapGetters(['bigSum'])},methods: {...mapMutations({increment:'ADD', decrement:'SUBTRACT'}),...mapActions(['addOdd', 'addWait'])},}
</script><style>button{margin-left: 5px;}
</style>

4.模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确

修改store.js
为了解决不同模块命名冲突的问题，将不同模块的namespaced: true，之后在不同页面中引入getteractionsmutations时，需要加上所属的模块名

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

Vue Router

1.SPA

单页Web应用（single page web application，SPA）：

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

2.路由

路由：一组key-value的对应关系；key为路径，value可能是function或component。
多个路由需要经过路由器的管理。

路由分类：

后端路由
ⅰ理解：value是function，用于处理客户端提交的请求
ⅱ工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由
ⅰ理解：value是component，用于展示页面内容
ⅱ工作过程：当浏览器的路径改变时，对应的组件就会显示

3.基本使用

安装vue-router，命令npm i vue-router
应用插件Vue.use(VueRouter)
编写router配置项：src/router/index.js该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'			// 引入VueRouter
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

src/main.js:


import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'	// 引入VueRouter
import router from './router'				// 引入路由器Vue.config.productionTip = falseVue.use(VueRouter)	// 应用插件new Vue({el:'#app',render: h => h(App),router:router
})

实现切换
<router-link></router-link>浏览器会被替换为a标签
active-class可配置高亮样式
<router-link active-class="active" to="/about">About</router-link>
指定展示位<router-view></router-view>

注意：

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

4.多级路由

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

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

5.路由传参query参数

<!-- 跳转并携带query参数，to的模板字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link><!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link :to="{path:'/home/message/detail',query:{id: m.id,title: m.title}}"
>跳转</router-link>

6.命名路由

作用：可以简化路由的跳转

如何使用：

给路由命名：

{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' // 给路由命名path:'welcome',component:Hello,}]}]
}<router-link :to="{name:'hello',query:{id:666,title:'你好'}}"
>跳转</router-link>

7.路由传参params参数

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

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

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

<router-link :to="{name:'xiangqing',params:{id:666,title:'你好'}}"
>跳转</router-link>

接收参数：

$route.params.id
$route.params.t

8.路由的props配置

props作用：让路由组件更方便的收到参数

src/router/index.js:

{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props($route){return {id: $route.query.id,title: $route.query.title}}
}

src/pages/Message.vue:父

<li v-for="m in messageList" :key="m.id"><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link>

src/pages/Detail.vue：子

<template><ul><li>消息编号：{{ id }}</li><li>消息标题：{{ title }}</li></ul>
</template><script>export default {name:'Detail',props:['id','title']}
</script>

9.路由跳转方式

router-link属性：
路由跳转的 replace 方法
1。作用：控制路由跳转时操作浏览器历史记录的模式
2。浏览器的历史记录有两种写入方式：push和replace
push是追加历史记录
replace是替换当前记录，路由跳转时候默认为push方式
3。开启replace模式
<router-link :replace="true" ...>News</router-link>
简写<router-link replace ...>News</router-link>
总结：浏览记录本质是一个栈，默认push，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为replace就是不追加，而将栈顶地址替换

编程式：
作用：不借助实现路由跳转，让路由跳转更加灵活
this.$router.push({}) 内传的对象与<router-link>中的to相同
this.$router.replace({})
this.$router.forward() 前进
this.$router.back() 后退
this.$router.go(n) 可前进也可后退，n为正数前进n，为负数后退

methods:{showPush(m){this.$router.push({name:'xiangqing',query:{id:m.id,title:m.title}})},

10.缓存路由

作用：让不展示的路由组件保持挂载，不被销毁

// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存<router-view></router-view>
</keep-alive>// 缓存多个路由组件
<keep-alive :include="['News','Message']"> <router-view></router-view>
</keep-alive>

11. activated deactivated生命周期钩子

activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态
具体使用

activated路由组件被激活时触发
deactivated路由组件失活时触发

12.路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

全局守卫：
router:

// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to,from,next) => {console.log('beforeEach',to,from)if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){ // 权限控制的具体规则next()	// 放行}else{alert('暂无权限查看')}}else{next()	// 放行}
})// 全局后置守卫：初始化时、每次路由切换后执行
router.afterEach((to,from) => {console.log('afterEach',to,from)if(to.meta.title){ document.title = to.meta.title //修改网页的title}else{document.title = 'vue_test'}
})

独享路由守卫：
路径下：

beforeEnter(to,from,next){console.log('beforeEnter',to,from)if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暂无权限查看')}
}

组件内守卫：
写在组件内：

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {... next()},//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {... next()},

13.路由器的两种工作模式

hash和history

对于一个url来说，什么是hash值？
#及其后面的内容就是hash值
hash值不会包含在HTTP请求中，即：hash值不会带给服务器
hash模式
a 地址中永远带着#号，不美观
b 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
c 兼容性较好
history模式
a 地址干净，美观
b 兼容性和hash模式相比略差
c 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题


const router =  new VueRouter({mode:'history',//mode:'hash',routes:[...]
})export default router

上线项目

npm run build：转成css、html、js
取dist中的资源放入服务器中