概念
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共亨状态进行集中式的管理(读写),也是一种组件间通信的方式,目适用于任意组件间通信。
何时使用
多个组件需要共亨数据时
搭建环境
1.创建文件:src/store/index.js
//引vue核心库
import Vue from "vue"
//引Avuex
import Vuex from " vuex"
//应用vuex插件
Vue.use(Vuex)
//准备actions对象—响应组件中用户的动作
const actions ={}
//准备mutations对象—修改state中的数据
const mutations ={}
//准备state对象—保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
2.在main.js中创建vm时传入store配置项
//引store
import store from "./store"
//创建vm
new Vue({
el: "#app",
render: h => h(App),
store
))
基本使用
1.初始化数据,配置actions,配置mutation,操作文件store.js
//引入Vue核心库
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用vuex插件
Vue.use(Vuex)
// 准备一个actions--用于相应组件中的动作
const actions = {
add:function(context,value){
// console.log('add被调用了',context,value);
context.commit('ADD',value)
}
}
// 准备mutations--用于操作数据(state)
const mutations = {
ADD(state,value){
// console.log('mutations中的add被调用了',a,b);
state.sum += value
}
}
// 准备state--用于存储数据(初始化数据)
const state = {
sum:0,
}
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
2.组件中读取vuex中的数据:$store.state.sum
3.组件中修改vuex中的数据: $store.dispatch('action中的方法名' ,数据)
或$store .commit( 'mutations'中的方法名 ,数据)
**备注:**若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch
,直接编写commit
getters的使用
1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
2.在store.js
中追加getters
配置
const getters = {
bigSum(state){
return state. sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
3.组件中读取数据:$store.getters.bigSum
四个map方法的使用
computed: {
//借助mapState生成计算属性:sum、 school、 subject(对象写法)
...mapState(isum: "sum" ,school : "school " ,subject: " subject"}),
//借助mapState生成计算属性,sum、 school、 subject(数组写法)
...mapstate(["sum" , " school" , "subject"],
}
2.mapGetters方法:用于帮助我们映射getters 中的数据为计算属性
computed: {
//借助mapGetters生成计算属性。bigSum(对象写法)- - ...mapGetters({bigSum: "bigSun"}).
//借助mapGetters生成计算属性。bigSum(数组写法)--
...mapGetters([ "bigSun" ])
},
3.mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:{
//靠mapActions生成: incrementOdd、 incrementwait(对象形式)
...mapActions({incrementOdd: "jiaodd" ,incrementwait: 'jiawait'})
//靠mapActions生成:incrementodd. incrementwait(数组形式)
. ..mapActions(['jiaodd" ,"jiawait"])
}
4.mapMutations方法:用于帮助我们生成与mutations 对话的方法,即:包含$store .commit(xx)
的函数
methods :{
//靠mapActions生成:increaent. decrement(对象形式)-.-
...mapMutations({increment : "JIA" ,decrement : "J IAN"}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations([ "IA', "3IAN"]),
备注: mapActions
与mapMutations
使用时,若需要传递参数署要:在模板中绑定事件时传递好参数,否则参数是事件对象。
模块化+命名空间
1.目的:让代码更好维护,让多种教据分类更加明确。
2.修改store.js
const countAbout = {
namespaced:true,/ /r开启命名空间
state:{x:1},
mutations: { ... },
actions: { ..-.},
getters: {
bigSum(state){
return state.sum * 10
}
}
}}
const personAbout = {
namespaced:true,/ r开启命名空间
state:{ ... },
mutations: { ... },
actions: {... },
const store = nev 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
//方式一:自己直接comnit
this.$store.commit ( " personAbout/ADD_PERSON ' ,person)
//方式二:借助mapMutationsr
...mapMutations( ' countAbout ',{increment: "JIA' ,decrement: "JIAN']),
1.理解:一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
2.前端路由: key是路径,value是组件。
1.安装vue-router,命令:npm i vue-router
2.应用插件:vue.use(VueRouter)
3.编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/about'
import Home from '../components/home'
//创建router实例对象,去管理一组一组的路由规则
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:"/home",
component:Home
}
]
})
注意点
1.路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
2.通过切换,"隐藏"了的路由组件,默认是被销毁掉的。需要的时候再去挂载。
3.每个组件都有自己的$route属性
,里面存储着自己的路由信息。
4.整个应用只有一个router,可以通过组件的$router
属性获取到。
1.配置路由规则,使用children配置项:
routes:[
{
path : ' / about ',
component: About,
},
{
path : ' / home ',
component: Home,
children[ //通过children配置子级路由
{
path:"news",//此处一定不要写:/news
component: News
},
{
path : " message" ,//此处一定不要写,/message
component:Message
}
]
}
)]
2.跳转((要写完整路径)∶
2.接受参数
$route.query.id;
$route.query.title
1.作用:可以简化路由的跳转
2.如何使用
(1).给路由命名:
routes:[
{
name:"about",
path:'/about',
component:About,
children:[
{
name:"detail",
path:"detail",
component:Detail
}
]
},
]
2.简化跳转
//简化前,需要写完完整的路径
<router-link to="/demo/test/welcome">跳转</router-link>
//简化前,直接通过名字跳转
<router-link :to="{name:'hello'}">跳转</router-link>
1.配置路由,声明接受params参数
{
path:"/home",
component:Home,
children:[
{
path:'Message',
component:Message,
children:[
{
name:"detail",
path:"detail/:id/:title",//使用占位符声明接受params参数
component:Detail
}
]
},
}
2.传递参数
<!-- 跳转路由并携带params参数,to的字符串写法 -->
<!-- <router-link :to="`/home/Message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带params参数,to的对象写法 -->
<router-link :to="{
name:'detail',
params:{id:m.id,title:m.title}
}" >{{m.title}}</router-link>
3.接受参数
$route.params.id
$route.params.title
作用:让路由组件更方便的收到参数
{
name:"detail",
path:"detail/:id/:title",
component:Detail,
// props的第一中写法,值为对象,该对象中的所有key-value都会以props形式传给Detail组件
/* props:{
a:1,
b:'hello'
} */
// props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有props参数,以props形式传给Detail组件
// props:true
// props的第三种写法,值为函数
props($route){
return {id:$route.query.id,title:$route.query.title}
}
}
的replace属性1.作用:控制路由跳转时操作浏览器历史记录的模式
⒉.浏览器的历史记录有两种写入方式:分别为push
和replace
, push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
3.如何开启replace模式:
1.作用:不借助
实现路由跳转,让路由跳转更加灵活
2.具体编码:
//$router的两个API
this.$router.push({
name:"detail",
query:{
id:m.id,
title:m.title
}
})
this.$router.replace({
name:"detail",
query:{
id:m.id,
title:m.title
}
})
作用:让不展示的路由组件保持挂载,不被销毁
//缓存一个路由组件
<keep-alive include="News">// include中写想要缓存的组件名,不写表示全部缓存
<router-view></ router-view>
< /keep-alive>
//缓存多个路由组件
<keep-alive :include="[ "News ' , " Message' ]">
<router-view></ router-view>
< /keep-alive>
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫
meta
路由源信息
//全局前置守卫:初始化时、每次路由切换前执行
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 //l修改网页的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()},
路由器的两种工作模式
1.对于一个url
来说,什么是hash
值?
#及其后面的内容就是hash值
2. hash值
不会包含在HTTP请求
中,即:hash值
不会带给服务器
3. hash模式
4.history
模式
看到这里的小伙伴们,如果喜欢,给博主一个一键三连么