快捷導(dǎo)航

關(guān)于vuex的原理及使用方法

更新時間：2025年01月15日 15:02:05 作者：Cshaosun

Vuex是Vue.js應(yīng)用的狀態(tài)管理模式,用于集中式管理應(yīng)用狀態(tài),它包括state、getters、mutations、actions和modules等模塊,適用于多組件共享的數(shù)據(jù)管理

簡介

Vuex 是 Vue.js 應(yīng)用的狀態(tài)管理模式，它為應(yīng)用內(nèi)的所有組件提供集中式的狀態(tài)（數(shù)據(jù)）管理。

可以幫我們管理 Vue 通用的數(shù)據(jù) (多組件共享的數(shù)據(jù))。

Vuex的構(gòu)成

state：state 是 Vuex 的數(shù)據(jù)中心，也就是說state是用來存儲數(shù)據(jù)的。
getters：state 對象讀取方法。Vue Components 通過該方法讀取全局 state 對象。
mutations：狀態(tài)改變操作方法。是 Vuex 修改 state 的唯一推薦方法，其他修改方式在嚴(yán)格模式下將會報錯。該方法只能進(jìn)行同步操作，且方法名只能全局唯一。操作之中會有一些 hook 暴露出來，以進(jìn)行state 的監(jiān)控等。
actions：操作行為處理模塊。負(fù)責(zé)處理 Vue Components 接收到的所有交互行為。包含同步/異步操作，支持多個同名方法，按照注冊的順序依次觸發(fā)。向后臺 API 請求的操作就在這個模塊中進(jìn)行，包括觸發(fā)其他 action 以及提交 mutation 的操作。該模塊提供了 Promise的封裝，以支持 action 的鏈?zhǔn)接|發(fā)。
modules：將 Store 分割成模塊，每個模塊擁有自己的 State、Getters、Mutations Actions。

Vuex的使用

1、安裝 Vuex：npm install vuex。

2、創(chuàng)建store示例

store對象

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

在 Vue 根實例中注冊store

import Vue from 'vue';
import App from './App.vue';
import store from './store';
 
new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

在組件中使用 Store

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};

使用Vuex內(nèi)容擴展

在真正開發(fā)中使用vuex時會有好多細(xì)節(jié)知識和注意事項，下面我們擴展一下，僅供參看

Vue 組件中獲得 Vuex 狀態(tài)(State)

方式一： this.$store.state獲取

通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到

computed: {
    count () {
        return this.$store.state.count
    }
}

方式二： mapState 輔助函數(shù)獲取（推薦）

當(dāng)一個組件需要獲取多個狀態(tài)時候，將這些狀態(tài)都聲明為計算屬性會有些重復(fù)和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性

<template>
    <div>{{count}}</div>
</template>
<script>
import { mapState }from 'vuex
export default{
    computed:{
        ...mapstate(['count'])
    }
}
</script>

Getter的定義和獲取方式

定義getters：

需要顯示所有大于5的數(shù)據(jù)，正常的方式，是需要list在組件中進(jìn)行再一步的處理，但是getters可以幫助我們實現(xiàn)它

【下面getters引用的state中的數(shù)據(jù)：list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】

getters: {
    // getters函數(shù)的第一個參數(shù)是 state
    // 必須要有返回值
    filterList:  state =>  state.list.filter(item => item > 5)
}

獲取getters：

方式一：通過屬性訪問

this.$store.getters.filterList

方式二：輔助函數(shù) - mapGetters

<template>
    <div>{{filterList}}</div>
</template>
<script>
import { mapGetters }from 'vuex
export default{
    computed:{
        ...mapGetters(['filterList'])
    }
}
</script>

Vue組件中調(diào)用Vuex：mutations中的方法

直接通過 store 調(diào)用 $store.commit('模塊名/xxx ', 額外參數(shù))
通過 mapMutations 映射

1、默認(rèn)根級別的映射 mapMutations([ ‘xxx’ ])

2、子模塊的映射 mapMutations(‘模塊名’, [‘xxx’]) - 需要開啟命名空間

方式一：普通調(diào)用方式

this.$store.commit('addCount') 此為不帶參數(shù)的寫法
this.$store.commit('addCount', 10) 此為帶參數(shù)寫法

<template>
    <div @click="addData">{{count}}</div>
</template>
<script>
export default{
    methods: {
        addData() {
            this.$store.commit('increment')
        }
    }
}
</script>

方式二：輔助函數(shù)- mapMutations

mapMutations是將所有mutations里面的方法映射為實例methods里面的方法

<template>
    <div @click="addData">{{count}}</div>
    <div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapMutations } from 'vuex'
    methods: {
        // 有別名的寫法[對應(yīng)第一行div]
        ...mapMutations({
             addData:'increment'
         })
        // 同名的簡寫[對應(yīng)第二行div]
        ...mapMutations(['increment'])
    }
}
</script>

Vue組件獲取Vuex：actions中的方法

直接通過 store 調(diào)用 $store.dispatch('模塊名/xxx ', 額外參數(shù))
通過 mapActions 映射

1、默認(rèn)根級別的映射 mapActions([ ‘xxx’ ])

2、子模塊的映射 mapActions(‘模塊名’, [‘xxx’]) - 需要開啟命名空間

方式一：普通調(diào)用方式

this.$store.dispatch('increment')
this.$store.dispatch('increment',{num: 10})

<template>
    <div @click="addData">{{count}}</div>
</template>
<script>
export default{
    methods: {
        addData() {
            this.$store.dispatch('increment')
        }
    }
}
</script>

方式二：輔助函數(shù) -mapActions

mapActions 是把位于 actions中的方法提取了出來，映射到組件methods中

<template>
    <div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapActions } from 'vuex'
    methods: {
        ...mapActions (['increment'])
    }
}
</script>