第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

此間少年_ · 更新于 2020-12-08

Getter

1. 前言

本小節(jié)我們將介紹 Vuex 中 getter 的使用方式。包括如何定義 getter、使用 getter、輔助函數(shù) mapGetters 的使用。Getter 在項(xiàng)目中的使用非常普通，學(xué)會(huì)使用 Getter 可以避免我們重復(fù)的通過(guò) state 獲取數(shù)據(jù)。同學(xué)們?cè)趯W(xué)完本小節(jié)后可以多嘗試寫一些 Getter 來(lái)鞏固本節(jié)的知識(shí)點(diǎn)。

2. 慕課解釋

Vuex 允許我們?cè)?store 中定義 “getter”（可以認(rèn)為是 store 的計(jì)算屬性）。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，而且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算?！?官方定義

我們可以把 Getter 理解成是封裝好的獲取數(shù)據(jù)的方法，在方法內(nèi)部我們可以對(duì) state 中的數(shù)據(jù)做一些相應(yīng)的處理，最后返回我們想要的數(shù)據(jù)。

3. 用法

3.1 通過(guò)屬性訪問(wèn)

Getter 接受 state 作為其第一個(gè)參數(shù)，我們可以對(duì) state 中的數(shù)據(jù)做相應(yīng)的處理，最終返回我們想要的數(shù)據(jù)：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句號(hào)',
      age: 18,
      skill: [
        {name: 'Vue', type: 1},
        {name: 'React', type: 1},
        {name: 'JAVA', type: 2},
        {name: 'Webpack', type: 3},
        {name: 'Node', type: 1}
      ]
    },
    getters: {
      skillList: state => {
        return state.skill.filter(item => item.type === 1)
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      skillList() {
        return this.$store.getters.skillList
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 16-20 行，我們定義了 Getter 方法 skillList，skillList 內(nèi)部我們返回狀態(tài) skill 中 type 為 1 的數(shù)據(jù)。
JS 代碼第 26-28 行，我們通過(guò) $store.getters 獲取 skillList 的返回值。

Getter 也可以接受其他 getter 作為第二個(gè)參數(shù)：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
    <div>我有 {{count}} 個(gè)技能包</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句號(hào)',
      age: 18,
      skill: [
        {name: 'Vue', type: 1},
        {name: 'React', type: 1},
        {name: 'JAVA', type: 2},
        {name: 'Webpack', type: 3},
        {name: 'Node', type: 1}
      ]
    },
    getters: {
      skillList: state => {
        return state.skill.filter(item => item.type === 1)
      },
      skillCount: (state, getters) => {
        return getters.skillList.length
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      skillList() {
        return this.$store.getters.skillList
      },
      count() {
        return this.$store.getters.skillCount
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋
JS 代碼第 16-23 行，我們定義了 Getter 方法 skillList 和 skillCount，skillList 內(nèi)部我們返回 skill 數(shù)據(jù) 中 type 為 1 的數(shù)組，skillCount 內(nèi)部我們通過(guò) getters 獲取 skillList 的數(shù)組長(zhǎng)度。
JS 代碼第 28-30 行，我們通過(guò) $store.getters 獲取 skillList 的返回值。
JS 代碼第 31-33 行，我們通過(guò) $store.getters 獲取 skillCount 的返回值。

3.2 通過(guò)方法訪問(wèn)

在上一個(gè)例子中我們只能通過(guò) skillList 獲取 type 為 1 的數(shù)據(jù)列表，那么如果我想獲取 type 為 2 的數(shù)據(jù)呢？同學(xué)們可能會(huì)說(shuō)：我們?cè)诙x一個(gè) skillList2 不就好了！確實(shí)這樣可以滿足需要，但是，如果又有 type = 3、type = 4 等等其他的呢？難道我們還要繼續(xù)寫 skillList3、skillList4 嗎？
其實(shí) getter 除了可以直接返回?cái)?shù)據(jù)之外，也可以通過(guò)讓 getter 返回一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)給 getter 傳參。在對(duì) store 里的數(shù)組進(jìn)行查詢時(shí)非常有用。
示例：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
    <div>我有 {{count}} 個(gè)技能包</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句號(hào)',
      age: 18,
      skill: [
        {name: 'Vue', type: 1},
        {name: 'React', type: 1},
        {name: 'JAVA', type: 2},
        {name: 'Webpack', type: 3},
        {name: 'Node', type: 1}
      ]
    },
    getters: {
      skillList: state => (type) => {
        return state.skill.filter(item => item.type === type)
      },
      skillCount: (state, getters) => (type) => {
        return getters.skillList(type).length
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      skillList() {
        return this.$store.getters.skillList(2)
      },
      count() {
        return this.$store.getters.skillCount(2)
      }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 17-19 行，我們定義了 Getter 方法 skillList，skillList 返回一個(gè)函數(shù)，該函數(shù)接收一個(gè) type 參數(shù)，函數(shù)內(nèi)部返回 state.skill 中對(duì)應(yīng) type 的數(shù)組。
JS 代碼第 20-22 行，我們定義了 Getter 方法 skillCount，skillCount 返回一個(gè)函數(shù)，該函數(shù)接收一個(gè) type 參數(shù)，函數(shù)內(nèi)部獲取 getters.skillList 的值，并返回?cái)?shù)組長(zhǎng)度。
JS 代碼第 28-30 行，我們通過(guò) $store.getters.skillList 傳入?yún)?shù) type 獲取 skillList 的返回值。
JS 代碼第 31-33 行，我們通過(guò) $store.getters.skillCount 傳入?yún)?shù) type 獲取 skillCount 的返回值。

4. mapGetters 輔助函數(shù)

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-for="item in skillList" :key="item.name">{{item.name}}</div>
    <div>我有 {{skillCount}} 個(gè)技能包</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句號(hào)',
      age: 18,
      skill: [
        {name: 'Vue', type: 1},
        {name: 'React', type: 1},
        {name: 'JAVA', type: 2},
        {name: 'Webpack', type: 3},
        {name: 'Node', type: 1}
      ]
    },
    getters: {
      skillList: state => {
        return state.skill.filter(item => item.type === 1)
      },
      skillCount: (state, getters)  => {
        return getters.skillList.length
      },
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      ...Vuex.mapGetters([
        'skillList',
        'skillCount'
      ])
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
JS 代碼第 29-32 行我們通過(guò) Vuex.mapGetters 獲取 skillList 和 skillCount 的值。

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

Vuex.mapGetters({
  skillListAlias: 'skillList',
  skillCountAlias: 'skillCount'
})

5. 小結(jié)

本節(jié)，我們帶大家學(xué)習(xí)了 Vuex 中 Getter 的使用方式。主要知識(shí)點(diǎn)有以下幾點(diǎn)：

  • 在 store 中定義 Getter 數(shù)據(jù)。
  • 通過(guò) $store.getter 訪問(wèn) getter。
  • 通過(guò)讓 getter 返回一個(gè)函數(shù)給 getter 傳參。
  • 使用 mapGetters 輔助函數(shù)簡(jiǎn)化獲取 getter 的寫法。