【Vue】Vuex介绍

文章目录

  • Vue
    • 六、Vuex
      • 01.Vuex概述
        • (1)前情提要
        • (2)Vuex
      • 02.基本使用
        • (1)语法示例
      • 03.核心概念
        • (1)State
        • (2)Mutation
        • (3)Action
        • (4)Getter
        • (5)Module


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模块化,每个模块中拥有自己的statemutationsactionsgetters

你可能感兴趣的:(vue)