Vuex和路由守卫

1、vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储，管理应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2、为什么要用vuex？
进行统一的状态管理，解决不同组件共享数据的问题。
不同视图需要变更同一状态的问题。
使用vuex之后，状态变化更加清晰。
3、如何使用vuex？
安装引入 npm install vuex --save
注册到vue中
import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)
 
实例化vuex的store
const store = new Vuex.Store({
 
    state: {
 
        count: 0,
 
        title:'vuex中的title'
 
    },
 
    mutations: {
 
        increment(state,count) {
 
            state.count=count
 
        }
 
    }
 
})
 
挂载在vue实例上
new Vue({
 
    store
 
})
 
在组件中就可以通过this.$store对vuex进行操作。

 4、核心概念

1、state

1. state是什么？ 是一个单一状态树，是vuex中为一个的数据源，我们的数据都是放在state中的。
2. 组件中去取state的值，通过this.$store.state，
3. 或者可以通过计算属性取得,mapState辅助函数，可以简化操作

4. import {mapState} from "vuex";
   computed: {
       // 可以写一些其他的计算属性
       ...mapState({
         // title: state => state.title
         // title: "title"
         title: state => {
           return state.title;
         }
       })
     }

   getters

5. 对state中的数据进行加工（派生）
6. 取getters中的值,通过this.$store.getters，
7. 或者通过计算属性取，getters也有辅助函数mapGetters， 用法和mapState一致。

8. import { mapGetters} from "vuex";
   	computed: {
   	    // 可以写一些其他的计算属性
   	    ... mapGetters ({
   	      title: "title"
   	    })
   	  }

   mutation

9. 修改state中的值，我们state每次变化，都应该由mutation去修改，方便追踪数据的流转。
10. 定义mutation

11. const store = new Vuex.Store({
            // ....
        mutations: {
            increment(state, count) {
                state.count = count
            },
            [CHANGE_TITLE](state, payload) {
                state.title = payload.title;
                // 不能这么写的
                state.obj = {
                    ...state.obj,
                    title:payload.title
                }
            }
        }
    })

    调用mutation
    this.$store.commit('mutation类型（函数名）',"参数，参数一般是对象形式")
    this.$store.commit({type:'mutation类型（函数名）'},...其他参数)

    注意事项
    要遵循vue相应式变化的规则，简单说就是对于对象的赋值，要用新对象替换老对象。
    mutation的type或者说是函数名可以用常量维护。
    mutation函数必须是同步的。
    action

    action类似于mutation，不同的是
    action可以包含异步操作
    action不能直接修改state，如果想修改state的话，需要触发mutation
    怎么定义？
     

     actions: {
        // 通过context（上下文环境）可以触发mutation，触发action，获取state、getter等操作
            // 第二个参数就是我们传递过来的参数
            changeTitle(context,payload) {
                setTimeout(() => {
                    context.commit(CHANGE_TITLE, payload)
                }, 1000);
            }
        }

    怎么触发action
    this.$store.dispatch('action名字','参数')
    this.$store.dispatch({type:'action类型（函数名）'},...其他参数)
    module

    由于使用单一的状态树，项目中的状态会集中在一起，导致难以维护，这个时候可以通过module对store进行拆分。
    使用module之后，每个模块都有自己的state、mutation等内容，方便维护

    二、导航守卫（路由守卫）
    概念
    参考官网：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

    “导航”表示路由正在发生改变。正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

    记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

    2、全局前置守卫

    可以使用 router.beforeEach 注册一个全局前置守卫：
     

    router.beforeEach((to, from, next) => {
        console.log(to)：
        console.log(from)
        console.log(next)
    })
    // 路由前置守卫
    // to 跳转后的页面
    // from 跳转前的页面
    // next 是函数
    //   直接调用 next() 允许跳转
    //   next(false) 不允许跳转
    //   next('/index') 代表要跳转到首页

    router.beforeEach( ( to , from , next ) => {
        // 在跳转之前就可以增加逻辑判断了，根据不同的状态判断能否跳转到指定的页面
        // 比如搜索页面需要登录后才可以进入
        if(to.meta.isLogin){
        //     需要登录
        //     判断是否登录 写判断是否登录
            next("/")
        }else {
            // 不需要登录
            next()
        }
     
        // next(false)
        // 判断 那些页面是需要登录的  那些页面是不需要登录的
    } )
     
    //注意: 确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

    3、路由独享的守卫

    你可以在路由配置上直接定义 beforeEnter 守卫：这些守卫与全局前置守卫的方法参数是一样的。