Vuex 的基本用法

一、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)
    }
}

什么是异步？

第二种方式

...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'])
}