Vue知识点---Vuex、路由-阿里云开发者社区

Vuex

概念

在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共亨状态进行集中式的管理(读写)，也是一种组件间通信的方式，目适用于任意组件间通信。

何时使用?

何时使用

多个组件需要共亨数据时

搭建vuex环境

搭建环境

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的使用

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方法的使用

四个map方法的使用

1.mapState方法:用于帮助我们映射state中的数据为计算属性

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.跳转（(要写完整路径)∶

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

路由的query参数

1.传递参数

//跳转并携带query参数,to的对象写法
<router-link :to="{
                path:'/home/Message/detail',
                query:{id:m.id,title:m.title}
            }" >{{m.title}}</router-link>
//跳转并携带query参数,to的字符串写法
<router-link :to="`/home/Message/detail?id=${m.id}$title=${m.title}`">{{m.title}}</router-link>

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>

路由的params参数

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

路由的props配置

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

{
    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}
     }
 }

<router-link>的replace属性

1.作用:控制路由跳转时操作浏览器历史记录的模式

⒉.浏览器的历史记录有两种写入方式:分别为push和replace , push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push

3.如何开启replace模式:

<router-link replace ..... . .>News</router-link>

编程式路由导航

1.作用:不借助<router-link>实现路由跳转，让路由跳转更加灵活

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 "><router-view></router-view></keep-alive> <keep-alive :include="[ 'News ' , 'Message']"><router-view></router-view></keep-alive>

//缓存一个路由组件
<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模式

a．地址中永远带着#号，不美观

b.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合

c．兼容性较好

4.history模式

a．地址干净，美观

b．兼容性和hash模式相比略差

c．应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

看到这里的小伙伴们,如果喜欢,给博主一个一键三连么🎈🎈

Vue知识点---Vuex、路由

Vuex

概念

何时使用?

搭建vuex环境

基本使用

getters的使用

四个map方法的使用

模块化+命名空间

路由

基本使用

多级路由(嵌套路由)

路由的query参数

命名路由

路由的params参数

路由的props配置

<router-link>的replace属性

编程式路由导航

缓存路由组件

路由守卫

热门文章

最新文章

相关课程

相关电子书