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ù))
<!--備注：若沒有網(wǎng)絡請求或其他業(yè)務邏輯，組件可以越過actions,即不寫`dispatch`，直接編寫`commit`-->
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']),
}<!--備注：mapActions與mapMutations，若需要傳遞參數(shù)：需要在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。-->
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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別）
這篇文章主要介紹了Vue-cli中的靜態(tài)資源管理（src/assets和static/的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家介紹了讓ChatGPT解讀Vue3源碼過程解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
vue使用better-scroll實現(xiàn)滑動以及左右聯(lián)動
這篇文章主要介紹了vue使用better-scroll實現(xiàn)滑動以及左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue2中使用AntV?以g2plot為實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了vue?element樹形控件實現(xiàn)樹形表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要給大家介紹了關于Vue中extends繼承和組件復用性的相關資料,組件(Component)是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,需要的朋友可以參考下2023-11-11
下面小編就為大家分享一篇Vue2.0子同級組件之間數(shù)據(jù)交互方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue3 提供了兩個新的 API：ref 和 reactive，它們可以幫助我們更好地管理和處理響應式數(shù)據(jù)，這篇文章主要介紹了vue3中的ref與reactive的區(qū)別和使用方法,需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動切換效果，僅在手機模式下可用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
elementui中的el-cascader級聯(lián)選擇器的實踐
本文主要介紹了elementui中的el-cascader級聯(lián)選擇器的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10