Vuex 的基本用法，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 +'】'
        }

第二种

import { mapGetters } from 'vuex'
computed:{
    ...mapGetters(['showNum'])
}

原文：https://blog.csdn.net/qq_51688013/article/details/123304310