深入了解Vuex中的State和Getter

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

Vuex_State

Vuex是vue的狀態管理工具，為了更方便的實作多個元件共享狀態。 【相關推薦：《vue.js教學》】

#安裝

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的詳細內容。更多資訊請關注PHP中文網其他相關文章！