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

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

Getter

1. 前言

本小節(jié)我們將介紹 Vuex 中 getter 的使用方式。包括如何定義 getter、使用 getter、輔助函數(shù) mapGetters 的使用。Getter 在項目中的使用非常普通，學(xué)會使用 Getter 可以避免我們重復(fù)的通過 state 獲取數(shù)據(jù)。同學(xué)們在學(xué)完本小節(jié)后可以多嘗試寫一些 Getter 來鞏固本節(jié)的知識點。

2. 慕課解釋

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

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

3. 用法

3.1 通過屬性訪問

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

實例演示
預(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: '句號',
      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>
運行案例 點擊 "運行案例" 可查看在線運行效果

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

Getter 也可以接受其他 getter 作為第二個參數(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}} 個技能包</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: '句號',
      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>
運行案例 點擊 "運行案例" 可查看在線運行效果

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

3.2 通過方法訪問

在上一個例子中我們只能通過 skillList 獲取 type 為 1 的數(shù)據(jù)列表，那么如果我想獲取 type 為 2 的數(shù)據(jù)呢？同學(xué)們可能會說：我們在定義一個 skillList2 不就好了！確實這樣可以滿足需要，但是，如果又有 type = 3、type = 4 等等其他的呢？難道我們還要繼續(xù)寫 skillList3、skillList4 嗎？
其實 getter 除了可以直接返回數(shù)據(jù)之外，也可以通過讓 getter 返回一個函數(shù)，來實現(xiàn)給 getter 傳參。在對 store 里的數(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}} 個技能包</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: '句號',
      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>
運行案例 點擊 "運行案例" 可查看在線運行效果

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

4. mapGetters 輔助函數(shù)

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

實例演示
預(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}} 個技能包</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: '句號',
      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>
運行案例 點擊 "運行案例" 可查看在線運行效果

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

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

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

5. 小結(jié)

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

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