快捷導(dǎo)航

Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用

更新時(shí)間：2022年10月28日 09:53:54 作者：歡dog

Vuex是實(shí)現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的一種機(jī)制,可以方便的實(shí)現(xiàn)組件之間數(shù)據(jù)的共享,數(shù)據(jù)緩存等等,下面這篇文章主要給大家介紹了關(guān)于Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用的相關(guān)資料,需要的朋友可以參考下

1.概念

在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件，對(duì)Vue應(yīng)用中多個(gè)組件的共享狀態(tài)（數(shù)據(jù)）進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

2.何時(shí)使用

多個(gè)組件需要共享數(shù)據(jù)時(shí)。

3.搭建Vuex環(huán)境

1.創(chuàng)建文件:src/store/index.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應(yīng)用Vuex插件
Vue.use(Vuex)
?
//準(zhǔn)備actions對(duì)象-響應(yīng)組件中用戶的行為
const actions = {}
//準(zhǔn)備mutations對(duì)象-修改state中的狀態(tài)（數(shù)據(jù)）
const mutations = {}
//準(zhǔn)備state對(duì)象-保存具體數(shù)據(jù)
const state = {}
?
//創(chuàng)建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.在main.js中創(chuàng)建vm時(shí)傳入store配置項(xiàng)

...
import store from './store/index.js'
...
?
//
new Vue({
    el:'#app',
    render:h => h(App),
    store
})

4.Vuex使用

1.初始化數(shù)據(jù)、配置actions、mutations，操作文件store.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應(yīng)用Vuex插件
Vue.use(Vuex)
?
//準(zhǔn)備actions對(duì)象-響應(yīng)組件中用戶的行為
const actions = {
    //響應(yīng)組件中jia的動(dòng)作
    jia(context,value){
        context.commit('JIA',value)
    }
}
//準(zhǔn)備mutations對(duì)象-修改state中的狀態(tài)（數(shù)據(jù)）
const mutations = {
    //執(zhí)行JIA
    JIA(state,value){
        state.sum+=value
    }
}
//準(zhǔn)備state對(duì)象-保存具體數(shù)據(jù)
const state = {
    sum:0
}
?
//創(chuàng)建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.組件中讀取Vuex中的數(shù)據(jù)：$store.state.sum

3.組件中修改Vuex中的數(shù)據(jù)：$store.dispatch('actions中的方法名',數(shù)據(jù))或$store.commit('mutations中的方法名',數(shù)據(jù))

5.getters的使用

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

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

...
const getters = {
    bigSum(state){
        return state.sum*10
    }
}
?
//創(chuàng)建并暴露store
export default new Vuex.Store({
    ...
    getters
})

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

6.四個(gè)map方法的使用

1.mapState方法：用于幫助我們映射state中的數(shù)據(jù)為計(jì)算屬性

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

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

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

3.mapActions方法：用于幫助我們生成與actions對(duì)話的方法，即包含$store.dispatch(xxx)的函數(shù)

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（對(duì)象寫法）
    ...mapState({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
 
    //靠mapActions生成：incrementOdd、incrementWait（數(shù)組寫法）
    ...mapState(['incrementOdd':'jiaOdd','incrementWait':'jiaWait']),
}

4.mapMutations方法：用于幫助我們生成與mutations對(duì)話的方法，即包含$store.commit(xxx)的函數(shù)

methods:{
    //靠mapMutations生成：increment、decrement（對(duì)象寫法）
    ...mapState({increment:'jia',decrement:'jian'}),
 
    //靠mapMutations生成：increment、decrement（數(shù)組寫法）
    ...mapState(['increment':'jia','decrement':'jian']),
}

7.模塊化+命名空間

1.目的：讓代碼更好維護(hù)，讓數(shù)據(jù)分類更加明確。

2.修改store.js

const countAbout = {
    namespaced:true,//開啟命名空間
    state:{...},
    actions:{
        jiaOdd(context,數(shù)據(jù)){...}
    },
    mutations:{
        jia(state,數(shù)據(jù)){...}
    },
    getters{
        bigSum(state){...}
    }
}
?
const personAbout = {
    namespaced:true,//開啟命名空間
    state:{
        list:[...]
    },
    actions:{...},
    mutations:{...},
    getters{...}
}
           
const store = new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

3.開啟命名空間后，組件讀取state數(shù)據(jù)：

//方式一：自己讀取
this.$store.state.personAbout.list
//方式二：借助mapState讀取
...mapState('personAbout',['list'])

4.開啟命名空間后，組件讀取getters數(shù)據(jù)：

//方式一：自己讀取
this.$store.getters['countAbout/bigSum']
//方式二：借助mapGetters讀取
...mapGetters('countAbout',['bigSum'])

5.開啟命名空間后，組件中調(diào)用dispatch：

//方式一：自己直接dispatch
this.$store.dispatch('countAbout/jiaOdd',數(shù)據(jù))
//方式二：借助mapActions讀取
...mapActions('countAbout',['incrementOdd':'jiaOdd'])

6.開啟命名空間后，組件中調(diào)用commit：

//方式一：自己直接commit
this.$store.commit('countAbout/jia',數(shù)據(jù))
//方式二：借助mapMutations讀取
...mapMutations('countAbout',['increment':'jia'])

總結(jié)

到此這篇關(guān)于Vuex(多組件數(shù)據(jù)共享的Vue插件)搭建與使用的文章就介紹到這了,更多相關(guān)多組件數(shù)據(jù)共享Vue插件Vuex內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: