【Vue】Vuex介绍

---

Vue

六、Vuex

01.Vuex概述

（1）前情提要

• 组件通信（小范围内）
  • 父传子：v-bind属性绑定
  • 子传父：v-on事件绑定
  • 兄弟间：EventBus
    • $on：发送数据的那个组件
    • $emit：发送数据的那个组件

（2）Vuex

• Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享
• 使用Vuex统一管理状态：
  • 集中管理共享数据，易于开发和后期维护
  • 高效实现组件之间的数据共享，提高开发效率
  • 存储的数据都是响应式的，实时持数据与页面的同步

02.基本使用

（1）语法示例

// 1. 安装 vuex依赖包：npm install vuex --save
// 2. 导入 vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
// 3. 创建 store 对象
const store = new Vuex.Store({
    // 数据
})
// 4. 将 store 对象挂载到 vue实例
new Vue({
    el: "#app",
    render: h => h(app),
    router,
    store
})

03.核心概念

（1）State

• State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储

  const store = new Vuex.Store({
      // state 中存放的就是全局共享的数据
      state: { count: 0 }
  })
  

• 访问State数据的方式

  • 第一种方式

    // this.$store.state.全局数据名称
    this.$store.state.count
    

  • 第二种方式

    // 1. 从 vuex 中按需导入 mapState 函数
    import { mapState } from 'vuex'
    // 2. 将全局数据映射为当前组件的计算属性
    computed: {
        // 将需要映射的数据放入数组中，可以传入多个
        // 使用方式同 data 中的数据，即直接使用变量名
        ...mapState(['count'])
    }
    

（2）Mutation

• Vuex不允许组件直接修改store中的数据，只能通过在mutations中定义函数，来变更Store中的数据

  注意，不能在mutations中执行异步操作

• 使用方法：

  const store = new Vuex.Store({
      // state中存放的就是全局共享的数据
      state: { count: 0 },
      mutations: {
          // 在 mutations 中调用 state 中的数据进行变更
          // 函数名( state[, 参数] )
          add(state){
              state.count++
          },
          sub(state, step){
      		state.count -= step
  	    }
      }
  })
  

• 触发mutations函数的方法：

  • 第一种方法

    methods:{
        handleAdd(){
            // 在组件中通过 this.$store.commit(mutations中的函数)
            // commit 的作用就是调用 mutations 的函数
            this.$store.commit('add')
        },
        handleSub(){
            // 传参
            this.$store.commit('add',3)
        }
    }
    
    

  • 第二种方法

    // 1. 从vuex中按需导入 mapMutations 函数
    import { mapMutations } from 'vuex'
    // 2. 将指定的 mutations 函数映射为当前组件的 methods 函数
    methods: {
        // 使用方式同 methods 中定义的方法，sub(3)
        ...mapMutations(['add', 'sub'])
    }
    

（3）Action

• Action用于处理异步任务。不能在mutations中使用异步函数，只能在actions中处理异步任务

• 使用方式：

  const store = new Vuex.Store({
      // state中存放的就是全局共享的数据
      state: { count: 0 },
      mutations: {
          // 在 mutations 中调用 state 中的数据进行变更
          // 函数名( state[, 参数] )
          add(state){
              state.count++
          },
          sub(state, step){
      		state.count -= step
  	    }
      },
      actions: {
          // 将异步操作定义到 actions 中
          // 同样的，在 actions 中也不能直接修改 State中的数据
          // 必须通过 mutations 中的函数来变更数据
          addAsync(context){
              setTimeout( ()=> {
                  // 这里commit的只能是mutations中的函数
                  context.commit('add')
              },1000)
          },
          subAsync(context, step){
              setTimeout(()=>{
                  context.commit('sub',step)
              })
          }
          
  	}
  })
  

• 触发Action

  • 第一种方式

    methods:{
        handleAdd(){
            // 在组件中通过 this.$store.dispatch(actions中的函数)
            // dispatch 的作用就是调用 actions 中的函数
            this.$store.dispatch('addAsync')
        },
        handeleSub(){
            // 传参
            this.$store.dispatch('subAsync',3)
        }
    }
    

  • 第二种方式

    // 1. 从vuex中按需导入 mapActions 函数
    import { mapActions } from 'vuex'
    // 2. 将指定的 actions 函数映射为当前组件的 methods 函数
    methods: {
        // 使用方式同 methods 中定义的方法,subAsync(3)
        ...mapActions(['addAsync', 'subAsync'])
    }
    

（4）Getter

• Getter用于对Store中的数据进行加工处理，形成新的数据（不会修改原数据，只作包装处理，类似computed计算属性）

• 使用方式·：

  const store = new Vuex.Store({
      // state中存放的就是全局共享的数据
      state: { count: 0 },
      mutations: {
          // 在 mutations 中调用 state 中的数据进行变更
          // 函数名( state[, 参数] )
          add(state){
              state.count++
          },
          sub(state, step){
      		state.count -= step
  	    }
      },
      actions: {
          // 将异步操作定义到 actions 中
          // 同样的，在 actions 中也不能直接修改 State中的数据
          // 必须通过 mutations 中的函数来变更数据
          addAsync(context){
              setTimeout( ()=> {
                  // 这里commit的只能是mutations中的函数
                  context.commit('add')
              },1000)
          },
          subAsync(context, step){
              setTimeout(()=>{
                  context.commit('sub',step)
              })
          }
  	},
      getter: {
          showNum(state){
              retrun '当前数据是' + state.count
          }
      }
  })
  

• 使用Getter

  • 第一种方式

    this.$store.getters.名称
    

  • 第二种方式

    // 1. 从vuex中按需导入 mapGetters 函数
    import { mapGetters } from 'vuex'
    // 2. 将指定的 getters 函数映射为当前组件的 computed 计算属性
    computed: {
        // 使用方式同 computed 计算属性
        ...mapGetters(['showNum'])
    }
    

（5）Module

• modules可以将store模块化，每个模块中拥有自己的state、mutations、actions和getters

---