Vuex中的State和Getter有什么用

這篇文章主要介紹Vuex中的State和Getter有什么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

Vuex 的內臟由五部分組成：State、Getter、Mutation、Action 和 Module。本篇文章先帶大家深入了解一下Vuex中的State和Getter，希望對大家有所幫助！

Vuex_State

Vuex是vue的狀態管理工具，為了更方便的實現多個組件共享狀態。

安裝

npm install vuex --save復制代碼

使用

import Vue from 'vue';import Vuex from 'vuex';

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

State

單一狀態樹，使用一個對象就包含了全部的應用層級狀態。

在Vue組件中獲得Vuex狀態

Vuex 通過store 選項，提供了一種機制將狀態從跟組件“注入”到每一個子組件中（調用Vue.use(Vuex)）。

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

<div class="home">
  {{ $store.state.count }}</div>復制代碼

mapState 輔助函數

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

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

使用不同的名字：

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 簡寫
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

Vuex_Getter

store的計算屬性。getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

Getter 接收state作為其第一個參數、getters作為其第二個參數。

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

通過屬性訪問

Getter會暴露為store.getters對象：this.$store.getters.doubleCount

通過方法訪問

也可以讓getter返回一個函數，來實現給getter傳參

getters: {
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

mapGetters 輔助函數

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

如果你想將一個 getter 屬性另取一個名字，使用對象形式：

mapGetters({
   // 把 `this.doneCount` 映射為 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

以上是“Vuex中的State和Getter有什么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！