vuex與map映射實(shí)現(xiàn)方法梳理分析

更新時(shí)間：2022年09月13日 09:03:09 作者：旺仔好吃糖

Vuex中的映射允許您將state中的任何屬性(state、getter、mutation和action)綁定到組件中的計(jì)算屬性,并直接使用state中的數(shù)據(jù)，下面我們來(lái)詳細(xì)了解

Vuex

vuex執(zhí)行過(guò)程

??相當(dāng)于一個(gè)公共的資源庫(kù)，保存共有的數(shù)據(jù)

??使用場(chǎng)景：點(diǎn)擊按鈕后，將數(shù)據(jù)保存到store身上，跳轉(zhuǎn)路由后使用

??將actions,mutations(操作數(shù)據(jù)),state(儲(chǔ)存數(shù)據(jù)),都交給store管理,storez在vc和vm上都有

??其中state里面是自定義的一些變量，需要用來(lái)保存數(shù)據(jù)；mutations是用來(lái)觸發(fā)事件，相當(dāng)于方法，用戶(hù)需要通過(guò)觸發(fā)這個(gè)方法，借此來(lái)保存數(shù)據(jù)；第二個(gè)參數(shù)為用戶(hù)傳入的值，然后在方法中賦值給state中變量，也可以準(zhǔn)備getters對(duì)state中的數(shù)據(jù)進(jìn)行加工

??在組件中通過(guò)dispatch將數(shù)據(jù)傳給actions，在actions中的方法中通過(guò)commit將數(shù)據(jù)交給mutations

vuex的使用

??1. store在vc和vm中均有

??2. 組件中讀取vuex中的數(shù)據(jù):$store.state.sum

??3. 組件中修改vuex中的數(shù)據(jù):$store.dispatch(‘action中的方法名’,數(shù)據(jù))或 $store.commit(‘mutation中的方法名’,數(shù)據(jù))

??4. 如果組件中沒(méi)有過(guò)多的邏輯業(yè)務(wù)要求，組件中也可以越過(guò)action，即不寫(xiě)dispatch直接編寫(xiě)commit

創(chuàng)建store

//創(chuàng)建store文件夾下的index.js，在main.js中引用，并在new Vue({})加入
//index.js文件中
//store下的index.js
//該文件用于創(chuàng)建Vuex中最重要的Store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
-----------------------
 Vue.use(Vuex)
    //創(chuàng)建store 
    const store = new Vuex.Store({
        actions,
        mutations,
        state,
        getters(放入store中操作的屬性)
    })
    //暴露/導(dǎo)出store
  export default store

在組件中讀取index.js中state中的數(shù)據(jù)

//組件中
$store.state.sum

組件中修改vuex中的數(shù)據(jù):$store.dispatch(‘action中的方法名’,數(shù)據(jù))或 $store.commit(‘mutations中的方法名’,數(shù)據(jù))

 methods:{
            increment(){
                //沒(méi)有任何操作邏輯，可以直接通過(guò)commit和mutations對(duì)話(huà)
                // this.$store.dispatch('jia',this.n)\
                this.$store.commit('JIA',this.n)
            },
             decrement(){
                // this.$store.dispatch('jian',this.n)
                 this.$store.commit('JIAN',this.n)
             },
             incrementOdd(){
               this.$store.dispatch('jiaOdd',this.n)
             },
             incrementWait(){
               this.$store.dispatch('jiaWait',this.n)
             }
   }

index.js中對(duì)state中數(shù)據(jù)的操作(actions,mutations,state,getters)

//準(zhǔn)備actions----用于響應(yīng)組件中的動(dòng)作
const actions ={
    //context為上下文 里面含有state等很多
    // jia(context,value){
    //     console.log('actions中的jia被調(diào)用了',value);
    //     context.commit('JIA',value)
    // },
    // jian(context,value){
    //     context.commit('JIAN',value)
    // },
    jiaOdd(context,value){
        if(context.state.sum %2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//準(zhǔn)備mutations---用于操作數(shù)據(jù)(state)
    const mutations = {
        JIA(state,value){
            console.log('mutations被調(diào)用了',state,value);
            state.sum += value
        },
        JIAN(state,value){
            state.sum -= value
        }
    }
    //準(zhǔn)備state ---- 用于存儲(chǔ)數(shù)據(jù)
    const state ={
        sum:0
    }

getters配置

1.概念:當(dāng)state中的數(shù)據(jù)需要通過(guò)加工后再使用時(shí)，可以使用getters加工

2.再store.js中追加getters配置

---------
//準(zhǔn)備getters----用于將state中的數(shù)據(jù)進(jìn)行加工
const getters ={
    bigSum(state){
        return state.sum*10
    }
}
//創(chuàng)建store 
const store = new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
//暴露,導(dǎo)出store
export default store

3.在組件中讀取數(shù)據(jù):$store.getters.bigSum

Map映射

mapState方法

computed:{
    //借助mapState生成計(jì)算屬性,sum,school等（對(duì)象寫(xiě)法）
    ...mapState({sum:'sum',school:'school'})
    //借助mapState生成計(jì)算屬性,sum,school等（數(shù)組寫(xiě)法）
    ...mapState(['sum','school'])
}

mapGetters方法:用于幫助我們映射getters中的數(shù)據(jù)為計(jì)算屬性

computed:{
    //借助mapGetters生成計(jì)算屬性,sum,school等（對(duì)象寫(xiě)法）
    ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成計(jì)算屬性,sum,school等（數(shù)組寫(xiě)法）
    ...mapGetters(['bigSum'])
}

mapActions方法

methods:{
    //靠mapActions生成 incrementOdd,incrementWait(對(duì)象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
     //靠mapActions生成 incrementOdd,incrementWait(數(shù)組形式)
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法

methods:{
    //靠mapMutations生成 incrementOdd,decrement(對(duì)象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'})
     //靠mapMutations生成 JIA,JIAN(數(shù)組形式)
    ...mapMutations(['JIA','JIAN'])
}