一、Vuex 概述

1.1 传统的组件之间的共享数据方式

  • 父向子传值: v-bind

  • 子向父传值:v-on

  • 兄弟组件之间共享数据:EvenBus

  • $on 接受数据的那个组件

  • $emit 发送数据的那个组件

    缺点:只能通过父传子 和 子传父的方式传值,若想要两个毫无关系的组件传值则很繁琐(需要找到 他们之间的关系)

1.2 Vuex是什么

vuex 是实现组件全局状态管理的一种机制,可以方便组件之间的数据共享

二、Vuex初始化

store.js

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        
    },
    mutations:{
        
    },
    actions:{
        
    }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
    store,
    render: h=>h(app)
}).$mount('#app')

三、Vue 的核心概念

  • state
  • mutations
  • actions
  • Getter

3.1 State

第一种方式:

用与存放公共的数据,类似于 vue 中的 data 属性

this.$store.state.count

// 创建 store 数据源, 提供唯一公共数据
// Store.js
const store = new Vuex.Store({
    state:{
        count:0
    }
})
// 目标组件中
this.$store.state.count
第二种方式

...mapState(['count'])

// 目标组件中
// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'
// 2. 将全局数据,映射为当前组件的计算属性
computed:{
	...mapState(['count'])
}

3.2 mutations

用于变更 Store 中的数据

第一种方式

this.$store.commit()

// Store.js
// 定义 Mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state){
            state.count++
        }
    }
})
// 目标组件
// 调用 mutation
methods:{
    handle1(){
        // 触发 mutations 的第一种方式
        this.$store.commit('add')
    }
}

可以在触发 mutations 时传递参数:

// Store.js
// 定义 Mutation
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        addN(state,step){
            //变更状态
            state.count += step
        }
    }
})
// 目标组件
// 调用mutation
methods:{
    handle2(){
        // 在调用 commit 函数触发 mutations 时携带参数
        this.$store.commit('addN',3)
    }
}
第二种方式

...mapMutations(['add','addN'])

// 目标组件
// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
....
// 2. 将指定的 mutations 函数,映射为当前组件的 methods 函数
methods:{
    ...mapMutations(['add','addN'])btnHandler1(){
        this.add()
    }
    btnHandler2(){
        this.addN(3)
    }
}

3.3 Action

触发 actions 异步任务时携带参数:

第一种方式

this.$store.dispatch()

// Store.js
// 定义 Action 
const store = new Vuex.Store({
    // ...省略其他代码
    mutations:{
		addN(state,step){
            state.count += step
        }
    },
    actions:{
        addNAsync(context,step){
            setTimeout(()=>{
                 // 在 actions 中,不能直接修改 state 中的数据
        		// 必须通过 context.commit() 触发某个 mutation 才行
                context.commit('addN',setp)
            },1000)
        }
    }
})
// 目标组件
methods:{
    handle(){
        // 在调用 dispatch 函数
        // 触发 actions 时携带参数
        this.$store.dispatch('addNasync',5)
    }
}

什么是异步?

image-20220306002126087

第二种方式

...mapActions({'addAsync','addNaSync'})

// 目标组件中
// 1.从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'
// 2.将指定的 actions 函数,映射为当前组件的 methods 函数
methods:{
	...mapActions({'subAsync'}),
    // 以下这个函数可以不要,需要调用函数时直接调用 subAsync 这个函数名
    btnHandler3(){
        this.subAsync()
    }
}

3.4 Getter

Getter 用于对Store 中的数据进行加工梳理形成的新数据

  1. Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性
  2. Store 中数据发生变化,Getter 的数据也会发生变化
  3. Getter 不会修改 Store 中的数据,它只起到包装的作用
// store.js
// 定义 Getter
const store = new Vuex.Store({
    state:{
        count:0
    },
    getters:{
        showNum:state =>{
            return '当前最新的数量是【'+state.count +'】'
        }
    }
})
使用方式

第一种

this.$store.getters.名称

第二种

import { mapGetters } from 'vuex'

computed:{
    ...mapGetters(['showNum'])
}
Logo

前往低代码交流专区

更多推荐