最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

npm install vuex --save復(fù)制代碼

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

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

  {{ $store.state.count }}

mapState 輔助函數(shù)

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

import { mapState } from 'vuex';

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

使用不同的名字：

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

Vuex_Getter

store的計(jì)算屬性。getter的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

Getter 接收state作為其第一個(gè)參數(shù)、getters作為其第二個(gè)參數(shù)。

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

通過屬性訪問

Getter會(huì)暴露為store.getters對(duì)象：this.$store.getters.doubleCount

通過方法訪問

也可以讓getter返回一個(gè)函數(shù)，來實(shí)現(xiàn)給getter傳參

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

this.$store.addCount(3);

mapGetters 輔助函數(shù)

import { mapsGetters } from 'vuex';

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

如果你想將一個(gè) getter 屬性另取一個(gè)名字，使用對(duì)象形式：

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

以上是“Vuex中的State和Getter有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！