vuex、混入和路由守卫

1. vuex

1.1 什么是vuex

Vuex 是⼀个专为 Vue.js 应⽤程序开发的状态管理模式 + 库。它采⽤集中式存储管理应⽤的所有组件的状态

1.2 为什么用vuex

进⾏统⼀的状态管理，解决不同组件共享数据的问题

1.3 vuex的核心理念

1.3.1 state

state：存放初始数据，类似于data
在store文件中的index.js中：

    state: {
        num: 1000,
        count: 10
    },

在组件中获取state中的值：

1. this.$store.state

created() {
    console.log(this.$store.state.num)
}

2. 通过计算属性取得，mapState辅助函数

 computed:{
       ...mapState({
           // 箭头函数
           num:state => state.num,
           // 'count'等同于state => state.count
           count:'count'
       })
   }

1.3.2 getters

getters：对state中的数据进⾏初加⼯，不修改state中的数据。类似于计算属性，也会缓存
在store文件中的index.js中：

getters: {
        // state：state里面的数据
        addCount(state) {
            console.log(state)
            return state.count++
        }
    },

在组件中获取getters中的值：

1. this.$store.getters

created() {
    console.log(this.$store.getters.addCount)
}

2. 通过计算属性取得，mapGetters辅助函数

 computed:{
       ...mapGetters({
           add:state => state.addCount,
       })
   }

1.3.3 mutations

mutations：修改state中的数据
在store文件中的index.js中：

mutations: {
       changeNum(state, payload) {
           // state：state里面的数据     payload：接收的参数
           console.log(state, payload)
           state.num = payload.msg
       }
   },

在组件中调用mutations：

1. this.$store.commit(事件名，传递的数据)

created() {
    this.$store.commit('changeNum', {msg: 200}) // 事件名字 传递的参数
    this.$store.commit({
            type: 'changeNum',
            msg: 300
    })
}

2. 在methods中，通过mapMutations辅助函数

methods: {
       // 数组：
       ...mapMutations(['changeNum']),
      // 对象：
       ...mapMutations({
           changeNum: 'changeNum'
       }),
   }
// 调用changeNum方法
created() {
  this.changeNum({msg: 700})
}

1.3.4 actions

actions：修改state中的数据，必须调⽤mutations⾥⾯的⽅法，异步操作
在store文件中的index.js中：

 actions: {
       // content 上下文环境       payload：：接受的参数
       changeNum1(content, payload) {
           console.log(content, payload)
           setTimeout(() => {
               content.commit('changeNum', {msg: payload.msg1})
           }, 1000)
       }
   },

在组件中调用actions：

1. this.$store.dispatch(事件名，传递的数据)

created() {
    this.$store.dispatch('changeNum1', {msg1: 400}) // 事件名字 传递的参数
}

2. 在actions中，通过mapActions辅助函数

 methods: {
      ...mapActions(['changeNum1']),
   }
// 调用changeNum1方法
created() {
  this.changeNum1({msg1: 600})
}

1.3.5 modules

模块化
在store文件中的index.js中：

modules: {
      modulesA
  }

在store文件modulesA.js中：

const modulesA = {
    state: {
        num1: 10000000
    },
    // 默认state就是有命名空间，
    // 如果想给mutation和action也加上命名空间的话，这里设置模块的namespaced：true
    namespaced:true,
    getters: {},
    mutations: {
        changeNum(){
            console.log('modulesA')
        }
    },
    actions: {}
}

export default modulesA

在组件中获取modulesA中的state值：

1. this.$store.state

created() {
    console.log(this.$store.state.modulesA.num1)
}

2. mapState辅助函数

 computed:{
       ...mapState({
           num2: state => state.modulesA.num1
       })
   }

在组件中调用modulesA中的mutations ：

如果modulesA中的mutations的事件名与index.js中的事件名相同时，想要调用modulesA中事件，需要给mutation加上命名空间。
设置模块的namespaced：true

1. this.$store.commit

created() {
    console.log(this.$store.commit('modulesA/changeNum'))
}

2. mapMutations辅助函数

 methods: {
        ...mapMutations({
            changeNum: 'modulesA/changeNum'
        }),
    }
// 调用
created() {
   this.changeNum()
}

2. 混入

• 分发 Vue 组件中的可复⽤功能
• 声明js⽂件 进⾏导出，在使⽤的⻚⾯导⼊ mixins:[ 导出的⽂件 ]

3.路由守卫

3.1 什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

3.2 router.beforeEach 前置守卫

• 前置守卫：路由跳转前触发

router.beforeEach(function(to, from, next)){})
// to:即将要进⼊的⽬标,
// from:当前导航正要离开的路由,
// next:函数，必须严格执⾏⼀遍

• 元信息 meta

3.3 router.afterEach 后置守卫

3.4 router.beforeEnter 独享守卫

beforeEnter:()=>(to, from, next){}
// to:即将要进⼊的⽬标,
// from:当前导航正要离开的路由,
// next:函数，必须严格执⾏⼀遍