如何使用vuex和如何进行路由守卫

2.1、vuex是什么？

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

2.2、为什么要用vuex？

进行统一的状态管理，解决不同组件共享数据的问题。
不同视图需要变更同一状态的问题。
使用vuex之后，状态变化更加清晰。
2.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进行操作。
2.4、核心概念

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

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

2.4.2、getters

对state中的数据进行加工（派生）
取getters中的值,通过this.$store.getters，
或者通过计算属性取，getters也有辅助函数mapGetters，用法和mapState一致。
import { mapGetters} from "vuex";
computed: {
// 可以写一些其他的计算属性
... mapGetters ({
title: "title"
})
}
2.4.3、mutation
修改state中的值，我们state每次变化，都应该由mutation去修改，方便追踪数据的流转。
定义mutation

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函数必须是同步的。
2.4.4、action
action类似于mutation，不同的是
action可以包含异步操作
action不能直接修改state，如果想修改state的话，需要触发mutation
2.怎么定义？

 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类型（函数名）'},...其他参数)
2.4.5、module
由于使用单一的状态树，项目中的状态会集中在一起，导致难以维护，这个时候可以通过module对store进行拆分。
使用module之后，每个模块都有自己的state、mutation等内容，方便维护
如何定义

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

3、导航守卫（路由守卫）

3.2、全局前置守卫
你可以使用 router.beforeEach 注册一个全局前置守卫：
你可以使用 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.3、路由独享的守卫

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

const router = new VueRouter({

  routes: [

    {

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

  ]

})

如何使用vuex和如何进行路由守卫

2.1、vuex是什么？

2.2、为什么要用vuex？

2.3、如何使用vuex？

2.4、核心概念

3、导航守卫（路由守卫）

3.2、全局前置守卫

3.3、路由独享的守卫

猜你喜欢