1.概念

? 在Vue中實現集中式狀態（數據）管理的一個Vue插件，對vue應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

2.何時使用？

?多個組件依賴于同一狀態

來自不同組件的行為需要變更同一狀態

3.vuex工作原理?

?

如組件Count進行+2操作，通過store.dispatch('jia',2)分發給actions?

?Actions:對象 key是動作類型 value是個函數，在此函數內調用store.commit提交給Mutations

Mutations:對象，里面是function進行加2操作 后State內對對應的sum自動改變

Mutations里面不要寫任何業務邏輯和ajax請求。

隨后vuex可以重新解析組件，渲染頁面

4.搭建vuex環境

1. 創建文件：src/store/index.js

npm i vuex?

注：2022年2月7日，vue3成為默認版本，vuex也更新到了4版本。現在執行npm i vuex 安裝的是vuex4，vuex4只能在vue3中使用

vue2中，要用vuex的3版本

vue3中，要用vuex的4版本

npm i vuex@3

---------------------------------------------------------------------------------------------------------------------------------

在腳手架里寫import，不管import在哪個位置，它會掃描整個文件的import語句，然后把所有import語句按編寫順序匯總到最上方。所以如果在main.js中使用vuex的話，會優先執行

import store from './store'

然后再執行

Vue.use(Vuex)

導致順序錯誤，所以在src/store/index.js中應用vuex插件

//引入Vue核心庫 import?Vue?from?'vue' //引入Vuex import?Vuex?from?'vuex' //應用Vuex插件 Vue.use(Vuex)//準備actions對象——響應組件中用戶的動作 const actions = {} //準備mutations對象——修改state中的數據 const mutations = {} //準備state對象——保存具體的數據 const state = {}//創建并暴露store export?default?new?Vuex.Store({actions,mutations,state })

2.在main.js中創建vm時傳入store配置項? 讓所有組件實例對象vc看見store

...... //引入store import store?from?'./store' //當沒說哪個文件時，默認就是文件下的index.js ......//創建vm new?Vue({el:'#app',render:?h =>?h(App),store })

5.基本使用

初始化數據、配置actions、配置mutations，操作文件store.js

//引入Vue核心庫 import?Vue?from?'vue' //引入Vuex import?Vuex?from?'vuex' //引用Vuex Vue.use(Vuex)const actions = {//響應組件中加的動作jia(context,value){// console.log('actions中的jia被調用了',miniStore,value)context.commit('JIA',value)}, }const mutations = {//執行加JIA(state,value){// console.log('mutations中的JIA被調用了',state,value)state.sum += value} }//初始化數據 const state = {sum:0 }//創建并暴露store export?default?new?Vuex.Store({actions,mutations,state, })

組件中讀取vuex中的數據：$store.state.sum

組件中修改vuex中的數據：$store.dispatch('action中的方法名',數據)?或?$store.commit('mutations中的方法名',數據)

備注：若沒有網絡請求或其他業務邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit

-------------------------------------------------------------------------------------------------------------------------------

6.store全新配置項 getter

概念：當state中的數據需要經過加工后再使用時，可以使用getters加工。

在store.js中追加getters配置

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

組件中讀取數據：$store.getters.bigSum

-------------------------------------------------------------------------------------------------------------------------------?

7.四個map方法的使用? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ?import {mapState,mapGetters，mapActions,mapMutations} from 'vuex'

mapState方法：用于幫助我們映射state中的數據為計算屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

computed:{// 靠程序員自己親自去寫計算屬性he(){return this.$store.state.sum},xuexiao(){return this.$store.state.school},xueke(){return this.$store.state.subject},//借助mapState生成計算屬性 ，從state中讀取數據 （對象寫法）...mapState({he:'sum',xuexiao:'school',xueke:'subject'}),//借助mapState生成計算屬性 ，從state中讀取數據 （數組寫法） 生成的計算屬性的名和你真正要讀取的state中的名要相同// 相當于sum:'sum'...mapState(['sum','school','subject']),// ...obj, 相當于把obj中內容依次取出放入到obj中 出放入到obj中 }

mapGetters方法：用于幫助我們映射getters中的數據為計算屬性

computed: {/*bigSum(){return this.$store.getters.bigSum}*///借助mapGetters生成計算屬性：bigSum（對象寫法）...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成計算屬性：bigSum（數組寫法）...mapGetters(['bigSum']) },

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

//程序員自己寫/*incrementOdd(){this.$store.dispatch('odd',this.n)},incrementWait(){this.$store.dispatch('wait',this.n)}*///借助mapActions生成對應的方法，方法中會調用dispatch去聯系actions(數組寫法)...mapActions({incrementOdd:'odd',incrementWait:'wait'}),//借助mapActions生成對應的方法，方法中會調用dispatch去聯系actions(對象寫法)//使用數組寫法 點擊事件名 和dispatch分發給actions的名字都要是'odd','wait'// ...mapActions(['odd','wait']),

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

methods:{// 程序員自己寫/* increment(){this.$store.commit('JIA',this.n)},decrement(){this.$store.commit('JIAN',this.n)},*///借助mapMutations生成對應的方法，方法中會調用commit去聯系mutations(對象寫法）...mapMutations({increment:'JIA',decrement:'JIAN'}),//借助mapMutations生成對應的方法，方法中會調用commit去聯系mutations(數組寫法）//使用數組寫法 點擊事件名 和commit提交給mutations的名字都要是'JIA','JIAN'// ...mapMutations(['JIA','JIAN']),

備注：mapActions與mapMutations使用時，若需要傳遞參數(this.n)

需要在模板中綁定事件時傳遞好參數，否則參數默認是事件對象。

<button @click="increment(n)">+</button>

<button @click="decrement(n)">-</button>

<button @click="incrementOdd(n)">當前求和為奇數再加</button>

<button @click="incrementWait(n)">等一等在加</button>

總結

以上是生活随笔為你收集整理的Vue组件间通信--Vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。