Vue2.x--Vuex与路由

一、Vuex

1.1.Vuex简介

1.1.1.Vuex是什么

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

2. Github 地址：https://github.com/vuejs/vuex

1.1.2.什么时候使用Vuex

多个组件需要共享数据时

1. 多个组件依赖于同一状态

2. 来自不同组件的行为需要变更同一状态

1.2.搭建Vuex环境

1.创建文件：src / store / index.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions对象 相应组件中用户的动作
const actions = {}
// 准备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.3.基本使用

1.初始化数据、配置actions、配置mutations，操作文件store.js
// 引入Vue核心库
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
const actions = {
  // 响应组件中的动作
  jia(context, value) {
    // console.log('actions中的jia被调用了',miniStore,value)
    context.commit('JIA', value)
  },
}
const mutations = {
  // 执行加
  JIA(state, value) {
    // console.log('mutations中的JIA被调用了',state,value)
    state.sum += value
  }
}
// 初始化数据
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

1.4.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

1.5.四个map方法的使用

1.mapState方法：用于帮助我们映射state中数据为计算属性
    computed: {
        // 借助mapState生成计算属性：sum school subject(对象写法)
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
        // 借助mapState生成计算属性：sum school subject(数组写法)
        ...mapState(['sum','school','subject']),
    },
2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性
    computed: {
        // 借助mapGetters生成计算属性：bigSum(对象写法)
        ...mapGetters({bigSum:'bigSum'}),
        // 借助mapGetters生成计算属性：bigSum(数组写法)
        ...mapGetters(['bigSum'])
    },
3.mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
    mathods: {
        // 靠mapActions生成：incrementOdd incrementWait(对象形式)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
        // 靠mapActions生成：incrementOdd incrementWait(数组形式)
        ...mapActions(['jiaOdd','jiaWait'])
    }
4.mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
    mathods: {
        // 靠mapActions生成：increment,decrement(对象形式)
        ...mpaMutations({increment:'JIA',decrement:'JIAN'})
        // 靠mapActions生成：'JIA','JIAN'(数组形式)
        ...mpaMutations(['JIA','JIAN'])
    }
mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

1.6.模块化+命名空间

1 目的：让代码更好的维护，让多种数据分类更加明确
2 修改store.js
    const countAbout = {
        namespaced:ture,    // 开启命名空间
        state:{x:1},
        mutations: {...},
        actions: {...},
        getters: {
            bigSum(state){
                return state.sum * 10
            }
        },
    }
    const personAbout = {
        namespaced:ture,
        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'})

二、路由

2.1.vue-router的理解

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

1. 单页Web应用(single page web application, SPA)

2. 整个应用只有一个完整的页面

3. 点击页面中的导航连接不会刷新页面，只会做页面的局部更新

4. 数据需要通过ajax请求获取

2.2.路由的理解

什么是路由：

    1. 一个路由就是一组映射关系(key-value)

    2. key为路径，value可能是function或component

路由分类：

    1. 后端路由：

        理解：value是function,用于处理客户端提交的请求

        工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

    2. 前端路由：

        理解：value是component，用于展示页面内容

        工作过程：当浏览器的路径改变时，对应的组件就会显示

2.3.路由

理解：一个路由(route)就是一组映射关系(key-value)，多个路由需要路由器(router)进行管理
前端路由：key是路径，value是组件
基本使用：
    1 按照vue-router,命令:npm i vue-router
    2 应用插件:Vue.use(VueRouter)
    3 编写router配置项:
        // 引入VueRouter
        import VueRouter from 'vue-router'
        // 引入路由组件
        import Index from '../components/Index'
        import Home from '../components/Home'
        // 创建router实例对象，去管理一组一组的路由规则
        const router = new VueRouter({
            routes: [
                {
                    path:'/index',
                    component: Index
                },
                {
                    path:'/homd',
                    component: Home
                }
            ]
        })
        // 暴露router
        export default router
    4 实现切换(active-class默认样式)
        <router-link active-class="active" to="/index"></router-link>
    5 指定展示位置
        <router-view></router-view>
几个注意点：
    1 路由组件通常存放在pages文件夹，一般组件通常存放在compoents文件夹
    2 通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载
    3 每个组件都要自己的$route属性，里面存储着自己的路由信息
    4 整个应用只有一个router，可以通过组件的$router属性获取到

2.4.多级路由(嵌套路由)

1 配置路由规则，使用children配置项：
routes: [
    {
        path:'/index',
        component:Index,
    },
    {
        path:'/home',
        component:Home,
        children:[  // 通过children配置子级路由
            {
                path:'news',    // 此处一定不要写：/news
                component:News
            },
            {
                path:'message',
                component:Message
            },
        ]
    }
]
2 跳转(要写完整路径)：
<router-link to="/home/news">News</router-link>

2.5.路由的query参数

1 传递参数：
  跳转并携带query参数，to的字符串写法
  <router-link to="/home/message/detail?id=666&title=你好">跳转</router-link>
  跳转并携带query参数，to的对象写法
  <router :to="{
      path:'/home/message/detail',
      query:{
          id:666,
          title:'你好'
      }
  }">跳转</router>
2 接收参数：
  $route.query.id
  $route.query.title

2.6.命名路由

1 作用：可以简化路由的跳转
2 如何使用：
2.1 给路由命名：
    {
        path:'/demo',
        component:Demo,
        children:[
            {
                path:'test',
                component:Test,
                children:[
                    {
                        name:'hello',   // 给路由命名
                        path:'welcome',
                        component:Hello,
                    }
                ]
            }
        ]
    }
2.2 简化跳转：
    简化前，需要写完整的路径
    <router-link to="/demo/test/welcome">跳转</router-link>
    简化后，直接通过名字跳转
    <router-link :to="{name:'hello'}">跳转</router-link>
    简化写法配合传递参数
    <router :to="{
        name:'hello',
        query:{
            id:666,
            title:'你好'
        }
    }">跳转</router>

2.7.路由的params参数

1 配置路由，声明接收params参数
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'news',
                component:News
            },
           {
                component:Message,
                children:[
                    {
                        naem:'zero',
                        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:'zero',
        params:{
            id=666,
            title:'你好'
        }
    }">跳转</router-link>
    特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置
3 接收参数
    $route.params.id
    $route.params.title

2.8.路由的props配置

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

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

2.9.编程式路由导航

1 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
2 具体代码：
  // $router的两个API
  this.$router.push({
      name:'zero',
      params:{
          id:xxx,
          title:xxx
      }
  })
  this.$router.replace({
      name:'zero',
      params:{
          id:xxx,
          title:xxx
      }
  })

2.10.缓存路由组件

1 作用：让不展示的路由组件保持挂载，不被销毁
2 具体代码：
    <keep-alive include="News">
        <router-view></router-view>
    </keep-alive>

2.11.两个新的生命周期钩子

1 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2 具体名字：
  activated路由组件被激活时触发
  deactivated路由组件失活时触发

2.12.路由守卫

1 作用：对路由进行权限控制
2 分类：全局守卫、独享守卫、组件内守卫
3 全局守卫：
  // 全局前置守卫，初始化时执行、每次路由切换前执行
  router.beforeEach((to,from,next)=>{
      console.log('beforeEach',to,from)
      if(to.meta,isAuth){     // 判断当前路由是否需要进行权限控制
          if(localStorage.getItem('school')==='zero'){    // 权限控制的具体规则
              next()  // 放行
          }else{
              alert('无权限查看')
          }
      }else{next()// 放行}
  })
  // 全局后置守卫，初始化执行、每次路由切换后执行
  router.afterEach((ro,from)=>{
      console.log('afterEach',to,from)
      if(to.meta.title){
          document.title = to.meta.title  // 修改网页的title
      }else{document.title='vue_test'}
  })
4 独享守卫
  beforeEnter(to,from,next){
      console.log('beforeEnter',to,from)
      if(to.meta,isAuth){     // 判断当前路由是否需要进行权限控制
          if(localStorage.getItem('school')==='zero'){
              next()
          }else{
              alert('无权限查看')
          }
      }else{next()}
  }
5 组件内守卫
  // 进入守卫，通过路由规则进入该组件时被调用
  beforeRouteEnter(to,from,next){...}
  // 离开守卫，通过路由规则离开该组件时被调用
  beforeRouteLeave(to,from,next){...}

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

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

2.14.Vue UI组件库

移动端常用UI组件库：
  Vant：https://youzan.github.io/vant
  Cube UI：https://didi.github.io/cube-ui
  Mint UI：http://mint-ui.github.io
PC端常用UI组件库：
  Element UI：https://element.eleme.cn
  IView UI：https://www.iviewui.com