Vuex的五大核心詳細(xì)講解

更新時(shí)間：2022年09月26日 10:07:02 作者：阿選不出來

這篇文章主要為大家介紹了vuex的五個(gè)核心概念和基本使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

1.什么是vuex

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

2.什么時(shí)候用Vuex

多個(gè)組件依賴于同一狀態(tài).
來自不同組件的行為需要變更同一狀態(tài).

Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對短期和長期效益進(jìn)行權(quán)衡。如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex

可能是繁瑣冗余的。如果您需要構(gòu)建一個(gè)中大型單頁應(yīng)用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。

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

安裝:

npm install vuex@next --save

創(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對象---響應(yīng)組件中用戶的動(dòng)作
const actions = {}
//準(zhǔn)備mutation對象---修改state中的數(shù)據(jù)
const mutation = {}
//準(zhǔn)備state對象---保存具體的數(shù)據(jù)
const state = {}
// 創(chuàng)建并暴露store
export default new Vuex.store({
    actions,
    mutation,
    state
})

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

......
// 引入store
import store from './store'
......
//創(chuàng)建vm
new  Vue({
    el: '#app',
    render: h => h(app),
    store
})

4.五個(gè)核心

基礎(chǔ)使用:

初始化數(shù)據(jù), 配置 action, 配置 mutations , 操作文件 store.js

// 引入Vuex 核心庫
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 引用Vuex
Vue.use(Vuex)
const actions = {
    //響應(yīng)組件中的動(dòng)作
    jia(context, value) {
       context.commit('JIA',value)
    },
    jian(context, value) {
        context.commit('JIAN', value)
    }
}
const mutations = {
    //執(zhí)行加
    JIA(state, value) {
        state.sum += value
    }
}
// 初始化數(shù)據(jù)
const state = {
    sum:0
}
//創(chuàng)建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

組件中讀取vuex中的數(shù)據(jù): $store.state.sum

組件中修改vuex中的數(shù)據(jù): $store.dispatch('action中的方法名', 數(shù)據(jù)) 或 $store.commit('mutation中的方法名', 數(shù)據(jù))

備注 : 若沒有網(wǎng) 絡(luò) 請求或其他業(yè) 務(wù) 邏輯 , 組件中也可以越過 a c t i o n s , 既不寫 d i s p a t c h , 直接編寫 c o m m i t 備注: 若沒有網(wǎng)絡(luò)請求或其他業(yè)務(wù)邏輯, 組件中也可以越過actions, 既不寫 dispatch, 直接編寫commit 備注:若沒有網(wǎng)絡(luò)請求或其他業(yè)務(wù)邏輯,組件中也可以越過actions,既不寫dispatch,直接編寫commit

State

用于初始化數(shù)據(jù)，提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)統(tǒng)一放到store的state進(jìn)行儲存，相似與data

組件內(nèi)通過 this.$store.state.count 訪問到.

HTML內(nèi)通過 $store.state.count 訪問到.

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type)和一個(gè)回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個(gè)參數(shù)：

  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }

調(diào)用

在組件中使用:this.$store.commit('increment')

提交載荷 : this.$store.commit('increment',10) 你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的載荷（payload), 參數(shù)可以是字符串也可以是對象. 對象風(fēng)格的提交方式:

this.$store.commit({
  type: 'increment',
  amount: 10
})

注意::: mutation 必須是同步函數(shù)

Action

Action 提交的是 mutation，而不是直接變更狀態(tài)。 Action 可以包含任意異步操作。

使用-參數(shù)

Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters。

調(diào)用

在組件內(nèi) : this.$store.dispatch('increment')

// 以載荷形式分發(fā)
this.$store.dispatch('incrementAsync', {
  amount: 10
})
// 以對象形式分發(fā)
this.$store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

getters

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

在 store.js 中追加 getters 配置

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

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

Modules

目的: 讓代碼更好維護(hù), 讓多種數(shù)據(jù)分類更加明確.

修改 store.js

const countAbout = {
    namespaced:true,
    actions:{.....},
    mutations:{.....},
    state:{......},
    getters:{...},
}
const personAbout = {
    namespaced:true,
    actions:{.....},
    mutations:{.....},
    state:{......},
    getters:{...},
}
const store = new Vue.store({
     modules: {
           countAbout,
           personAbout
          }
})

開啟命名空間后, 組件中讀取state數(shù)據(jù):

// 方式一: 自己直接讀取
this.$store.state.personAbout.list
// 方式二: 借助mapState讀取
...mapState('countAbout',['sum','school', 'subject'])

開啟命名空間后, 組件中讀取getters數(shù)據(jù):

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

開啟命名空間后, 組件中調(diào)用dispath

// 方式一: 自己直接dispath
this.$store.dispath('personAbout/addPersonWang', person]
// 方式二: 借助mapActions讀取
...mapActions('countAbout',{incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})

開啟命名空間后, 組件中調(diào)用commit

// 方式一: 自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
// 方式二: 借助mapMutations讀取
...mapMutations('countAbout',{increment: 'JIA', decrement: 'JIAN'})

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

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

computed: {
    //借助mapState生成計(jì)算屬性, sum,school,subject (對象寫法)
    ...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 (對象寫法)
    ...mapGetters({bigSum:'bigSum'}),
    //借助mapGetters生成計(jì)算屬性, bigSum (數(shù)組寫法)
     ...mapGetters(['bigSum']),
}

**mapActions方法:**用于幫助我們生成與 action 對話的方法, 即 : 包含 $store.dispath(xxx) 的函數(shù)

methods: {
    //靠mapActions生成, incrementOdd, incrementWait (對象形式)
    ...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'}),
     //靠mapActions生成, incrementOdd, incrementWait (數(shù)組形式)
    ...mapActions(['jiaOdd','jiaWait']),
}

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

methods: {
    //靠mapMutations生成, increment, decrement (對象形式)
     ...mapActions({increment:'JIA', decrement:'JIAN'}),
     //靠mapMutations生成, JIA,JIAN (數(shù)組形式)
     ...mapActions(['JIA','JIAN']),
}

到此這篇關(guān)于Vuex的五大核心詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vuex核心內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: