Vuex和路由守卫

前言

掌握如何进行路由守卫
掌握如何进使用vuex

1、vuex是什么？

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

2、为什么使用vuex

1 进行统一的状态管理，解决不同组件共享数据的问题。
2 不同视图需要变更同一状态的问题。
3 使用vuex之后，状态变化更加清晰。

3.如何使用vuex

核心概念

3.1 state

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

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

3.2 getters

1. 对state中的数据进行加工（派生）
2. 取getters中值也是通过计算属性取的。
3. getters也有辅助函数mapGetters， 用法和mapState一致。

3.3 mutation

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

        changeLogin(state, payload) {
            state.login = payload.login
            state.userInfo = payload.userInfo

        }

3. 调用mutation
   a. this.$store.commit{(}^{\prime }mutation类型（函数名{）}^{\prime },"参数，参数一般是对象形式")b.this.$store.commit({type:‘mutation类型（函数名）’},…其他参数)
4. 注意事项
   • 要遵循vue相应式变化的规则，简单说就是对于对象的赋值，要用新对象替换老对象。
   • mutation的type或者说是函数名可以用常量维护。
   • mutation函数必须是同步的。

3.4 action

1. action类似于mutation，不同的是
   a. action可以包含异步操作
   b. action不能直接修改state，如果想修改state的话，需要触发mutation

2. 怎么定义？

actions: {
    // 通过context（上下文环境）可以触发mutation，触发action，获取state、getter等操作
        // 第二个参数就是我们传递过来的参数
        changeTitle(context,payload) {
            setTimeout(() => {
                context.commit(CHANGE_TITLE, payload)
            }, 1000);
        }
    }
    //也可以通过类型去找的mutation里面对应的内容 进而去修改state里面的值
    getUserInfo().then(res => {
                console.log(res)
                if(res.code==0) {
                    context.commit("changeLogin",{login:false,userInfo:res.userInfo})
                }
            })

3. 怎么触发action
   a. this. $ store.dispatch(‘action名字’,‘参数’)
   b. this.$ store.dispatch({type:‘action类型（函数名）’},…其他参数)

3.5 module

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

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

4. 命名空间
   a. 默认state就是有命名空间
   b. 如果想给mutation和action也加上命名空间的话，这里设置模块的namespaced：true

const moduleA = {
  namespaced:true,
  state: { ... },
  mutations: { 
    changeName(){}
  },
  actions: { ... },
  getters: { ... }
}
// this.$store.commit('a/changeName') 

5. 命名空间之后使用辅助函数createNamespacedHelpers

4.路由守卫

// 路由前置守卫
// to 跳转后的页面
// from 跳转前的页面
// next 是函数
//   直接调用 next() 允许跳转
//   next(false) 不允许跳转
//   next('/index') 代表要跳转到首页

router.beforeEach( ( to , from , next ) => {
    // 在跳转之前就可以增加逻辑判断了，根据不同的状态判断能否跳转到指定的页面
    // 比如搜索页面需要登录后才可以进入
    if(to.meta.isLogin){
    //     需要登录
    //     判断是否登录 写判断是否登录
        next("/")
    }else {
        // 不需要登录
        next()
    }
    // next(false)

    // 判断 那些页面是需要登录的  那些页面是不需要登录的
} )

router.afterEach((to,from)=>{
    console.log(to)
    console.log(from)
    console.log('路由跳转后')
})