vuex、辅助函数、守卫

vuex 全局状态管理

• 多组件间共享数据
• 任意一个组件改变状态，其他组件也跟着改变

如何使用vuex

1. 安装 npm i vuex -S

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    msg: 'hello',
    phone: 13422223333
  },
  mutations: {
    changeMsg (state,data) {
      state.msg = data
    },
    changePhone (state,data) {
      state.phone = data
    }
  },
  actions: {
    setUserPhone (store,data) {
      store.commit('changePhone',data)
    }
  },
  getters: {
    getPhone (state,getter) {
      return '+86'+state.phone
    },
    num () {

    }
  },
  modules: {
    home: {
      namespaced: true,
      state: {},
      mutations: {},
      actions: {},
      getters: {},
      modules: {}
    },
    mine: {
      namespaced: true,
      state: {},
      mutations: {},
      actions: {},
      getters: {},
      modules: {}
    },
  }
})

state

• 全局状态数据
• 组件中访问：this.$store.state.xx
• 单向数据流，只在组件中使用，不在组件中修改

mutations

• 管理同步操作
• 提供方法来修改state
• 在组件中访问：this.$store.commit(‘mutations中的方法’,数据)

actions

• 管理异步操作
• 在actions的方法中调用store.commit(‘mutations中的方法’,数据)
• 在组件中访问：this.$store.dispatch(‘actions中的方法’,数据)

getters

• vuex的全局计算属性（类似于组件的计算属性）
• 处理数据并返回数据
• 在组件中访问：this.$store.getters.属性名

modules

• 划分模块
• 避免store对象过于庞大，不方便使用和维护
• 每一个模块都包含 state mutations actions getters modules

vuex辅助函数

• vuex辅助函数作用是方便操作数据
• vuex辅助函数不是必须的！！
• 如果你不觉得之前的操作麻烦，你完全可以不用辅助函数！

1. mapState

• mapState放在组件的计算属性中，映射到组件的计算属性中
• …mapState([])只能获取外层state
• …mapState({})外层和模块内的state都可以获取
• 访问数据：this.计算属性名

2. mapGetters

• mapGetters放在组件的计算属性中，映射到组件的计算属性中
• …mapGetters([]) 外层和模块中的getters都可以获取
• …mapGetters({}) 外层和模块中的getters都可以获取，需要改名时用
• 访问数据：this.计算属性名

3. mapMutations

• mapMutations放在组件的 methods 中映射
• mapMutations映射mutations中的方法到methods中
• …mapMutations([])
• …mapMutations({}) 需要改名时用

4. mapActions

• mapActions放在组件的 methods 中映射
• mapActions映射actions中的方法到methods中
• …mapActions([])
• …mapActions({}) 需要改名时用

导航守卫（路由拦截）

• 钩子函数：到达某个阶段自动执行的函数
• “导航”表示路由正在发生改变 /home -> /mine
• 主要用来切换路由或取消进入某个路由
• 全局守卫 路由独享守卫 组件内的守卫 -> 钩子函数
• 参数或查询的改变并不会触发进入/离开的导航守卫

1. router.beforeEach() 每一个路由切换之前都会执行这个函数

• 全局前置守卫
• 一般使用在 main.js 中进行路由拦截
• 一旦添加次路由守卫，所有访问都被拦截，
• 如果不指示下一步干什么，不会进入任何路由
• console.log(‘拦截所有路由切换。。。’)
• console.log(to) // {…}路由信息对象 你要进入到的目标路由
• console.log(from) // {…}路由信息对象 你从哪个路由来的
• console.log(next) // f() {} 切换路由或取消进入某个路由
• next() // 进入目标路由

2. 路由独享守卫

• beforeEnter()
• 在某个路由设置中添加
• 进入该路由时执行

3. 组件内守卫

• beforeRouteEnter
• 在这个阶段，组件还没有创建，没有this对
• beforeRouteLeave

4. 全局后置钩子

• router.afterEach()
• 此钩子没有next函数，正常有 to from
• 切换路由之前执行（离开当前路由之前）