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

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

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

1.概念

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

2.何時使用

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

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

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

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

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

...
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'
//應用Vuex插件
Vue.use(Vuex)
?
//準備actions對象-響應組件中用戶的行為
const actions = {
    //響應組件中jia的動作
    jia(context,value){
        context.commit('JIA',value)
    }
}
//準備mutations對象-修改state中的狀態(tài)（數(shù)據(jù)）
const mutations = {
    //執(zhí)行JIA
    JIA(state,value){
        state.sum+=value
    }
}
//準備state對象-保存具體數(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.概念：當state中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用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.四個map方法的使用

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

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

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

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

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

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

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

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

7.模塊化+命名空間

1.目的：讓代碼更好維護，讓數(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.開啟命名空間后，組件中調用dispatch：

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

6.開啟命名空間后，組件中調用commit：

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

總結

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

您可能感興趣的文章:

Vue3中實現(xiàn)歌詞滾動顯示效果
本文分享如何在Vue 3中實現(xiàn)一個簡單的歌詞滾動效果,我將從歌詞數(shù)據(jù)的處理開始,一步步介紹布局的搭建和事件的實現(xiàn),感興趣的朋友跟隨小編一起看看吧
2024-02-02
詳解vuex狀態(tài)管理模式
這篇文章主要介紹了詳解vuex狀態(tài)管理模式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
使用vscode添加vue模板步驟示例
這篇文章主要為大家介紹了vscode添加vue模板步驟示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
Vue.js彈出模態(tài)框組件開發(fā)的示例代碼
本篇文章主要介紹了Vue.js彈出模態(tài)框組件開發(fā)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vant之關于van-list的使用以及一些坑的解決方案
這篇文章主要介紹了vant之關于van-list的使用以及一些坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue父子組件屬性傳遞實現(xiàn)方法詳解
這篇文章主要介紹了Vue父子組件屬性傳遞實現(xiàn)方法，我們主要從案例出發(fā)，用Vue3的寫法寫父子組件之間的屬性傳遞，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2023-02-02
vue組件間通信全面講解
這篇文章主要介紹了vue組件間通信全面講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue項目開發(fā)常見問題和解決方案總結
這篇文章主要介紹了Vue項目開發(fā)常見問題和解決方案總結，幫助大家更好的利用vue開發(fā)，感興趣的朋友可以了解下
2020-09-09
vue3+element-plus 實現(xiàn)動態(tài)菜單和動態(tài)路由的渲染的項目實踐
本文主要介紹了vue3+element-plus 實現(xiàn)動態(tài)菜單和動態(tài)路由的渲染的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-11-11
記一次用vue做的活動頁的方法步驟
這篇文章主要介紹了記一次用vue做的活動頁的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04