文章目录
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' // 引入Vuex
Vue.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' // 引入store
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App),
store, // 配置项添加store
beforeCreate() {
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' // 引入Vuex
Vue.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 相当于精简版的 $store
console.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 = false
Vue.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', // 此处一定不要带斜杠,写成 /news
component:News
},
{
path:'message', // 此处一定不要写成 /message
component: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中的资源放入服务器中