這篇文章主要講解了“集中式狀態(tài)管理Vuex如何使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“集中式狀態(tài)管理Vuex如何使用”吧！

創(chuàng)新互聯(lián)建站自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設計、成都網(wǎng)站設計、做網(wǎng)站、電子商務、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務。公司擁有豐富的網(wǎng)站建設和互聯(lián)網(wǎng)應用系統(tǒng)開發(fā)管理經(jīng)驗、成熟的應用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團隊及專業(yè)的網(wǎng)站設計師團隊。

1.vuex是什么

一個專門在Vue中實現(xiàn)集中式狀態(tài)管理的一個Vue插件,可以對vue應用中多個組件的共享狀態(tài)進行集中式的管理(讀取/寫入)，也是一種組件間通信的方式，并且適用于任意組件間通信

2.什么時候使用Vuex

1.多個組件依賴于同一狀態(tài)

2.來自不同組件的行為需要變更同一狀態(tài)

2.1如何使用Vuex

首先我們要知道，如果使用了Vuex就大概率需要兩個或者多個組件共享一套數(shù)據(jù)/狀態(tài)，所以首先需要準備兩個組件（分別為Count，Person），再就是我們要在src目錄下添加一個store文件，因為Vuex就是依靠store來進行一系列的準備任務的

2.2Count組件

在這個組件內我們可以看到map...一堆東西，這里我們就不得不說vuex里面的四個map了，如何使用map方法我放到了最后，這里我們只介紹一下該組件的功能Count是個有著“強大”計算功能的組件，它可以進行將最后的數(shù)進行放大10倍，可以奇數(shù)運算，可以延遲運算可謂是極其的“強大”

2.3Person組件

Person組件有著“強大”的人員添加的功能，他可以按照自己的意愿進行添加你的親朋好友等

2.4引入組件

分別再App內引入這兩個組件

2.5配置store文件夾下的index.js

要在store文件夾下面新建一個index.js文件，然后再index文件里面進行寫入如下代碼，首先是引入vue和vuex，再使用action進行動作響應，在這里我們可以接收到兩個參數(shù)分別式context和value他們分別式上下文和所傳入的值，我們可以再context身上發(fā)現(xiàn)我們所配置的state里面的所有東西,這就是context身上的東西，和value，這里value的值就是1

// 創(chuàng)建VUex種的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 準備actions——用于組件內的動作響應
const actions = {
    // 奇數(shù)加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延遲加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 準備mutations——用于數(shù)據(jù)操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations種的ADD_PERSON被調用',state.personList);
        state.personList.unshift(value)
    }
}
// 準備state——用于數(shù)據(jù)的儲存
const state = {
    sum: 0, // 當前和
    school: '山魚小學',
    subject: '前端',
    personList:[{id:'001',name:'張三'}]
}
// 用于加工state種的數(shù)據(jù)
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 創(chuàng)建store并且暴露store
export default new Vuex.Store({
    // actions: actions,// 前后名稱一樣所以可以觸發(fā)簡寫模式
    actions,
    mutations,
    state,
    getters
});

2.四個map方法的使用

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

computed: {
    // 使用mapState生成計算屬性，從state種讀取數(shù)據(jù)(...mapstate({})的意思是將其內的對象全部展開的計算屬性里面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 對象寫法
        
    // ...mapState(["sum", "school", "subject"]), // 數(shù)組寫法
  }

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

computed: {
    // 使用mapGetters生成計算屬性，從getters種讀取數(shù)據(jù)
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }

3.mapMutations:用于幫助我們生成與mutations交流的方法，包含$store.commit()的函數(shù)

methods: {
    // 借助mapMutations生成對應的方法，方法種會調用相應的commit去聯(lián)系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 對象式
    // ...mapMutations(["JIA", "JIAN"]), // 數(shù)組式(button的名字和vuex里面的名字必須統(tǒng)一)
  },

3.mapActions:用于幫助我們生成與mutations交流的方法，包含$store.commit()的函數(shù)

  methods: {
     // 借助mapActions生成對應的方法，方法種會調用相應的dispath去聯(lián)系actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //對象式
    // ...mapActions(["jiaodd", "jiaWait"]) //數(shù)組式
  },

注:mapActions與mapMutations使用時，若需要傳遞參數(shù)需要在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。

感謝各位的閱讀，以上就是“集中式狀態(tài)管理Vuex如何使用”的內容了，經(jīng)過本文的學習后，相信大家對集中式狀態(tài)管理Vuex如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！