亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

State

1. 前言

本小節我們將學習和使用 Vuex 中 state 的概念。包括如何創建 state、組件中獲取 state、以及輔助函數 mapState 的使用方法。

2. 創建數據倉庫

在上一小節中，我們已經給大家寫了一個簡單的示例，大家一定還記得 Vuex.Store({...}) 這個方法。在 Vuex 中，我們通過該方法創建一個數據倉庫，并把數據 state 傳入。例如：

const store = new Vuex.Store({
  state: {
    count: 12000,
    name: '慕課網',
    logo: ''
  }
})

那么，創建完數據倉庫后，我們怎樣才能在 Vue 組件中使用它呢？我們知道，要使用 Vue 需要通過 new Vue () 創建一個 Vue 實例，并傳入對象的參數。要在 Vue 中使用 store，只需要在創建 Vue 實例的時候將 store 傳入即可:

var vm = new Vue({
  el: '#app',
  store: store
})

3. 在 Vue 組件中獲得 Vuex 狀態

那么我們如何在 Vue 組件中展示狀態呢？由于 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：

實例演示
預覽 復制
復制成功！
<!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> {{ count }} </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      count: 12
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    computed: {
      count() {
        return this.$store.state.count
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋
JS 代碼第 4-8 行，我們定義了倉庫 store。
JS 代碼第 11 行，創建 Vue 實例的時候傳入 store。
JS 代碼第 13-15 行，利用計算屬性返回 count。
HTML 中利用插值顯示 count 的數據。

4. mapState 輔助函數

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

實例演示
預覽 復制
復制成功！
<!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> 我是： {{ name }}，我的今年：{{ age }}</div>
    <div>{{countPlusAge}}</div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script type="text/javascript">
  const store = new Vuex.Store({
    state: {
      name: '句號',
      age: 18
    }
  })
  var vm = new Vue({
    el: '#app',
    store,
    data() {
      return {
        count: 1
      }
    },
    computed: Vuex.mapState({
      // 箭頭函數可使代碼更簡練
      name: state => state.name,

       // 傳字符串參數 'age' 等同于 `state => state.age`
      age: 'age',

      // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
      countPlusAge (state) {
        return state.age + this.count
      }
    })
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋
JS 代碼第 4-9 行，我們定義了倉庫 store。
JS 代碼第 12 行，創建 Vue 實例的時候傳入 store。
JS 代碼第 18-28 行，利用計算屬性分別返回 name、age、countPlusAge。

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

computed: Vuex.mapState([
  // 映射 this.age 為 store.state.age
  'age',
   // 映射 this.name 為 store.state.name
  'name'
])
// ===等同于===
computed:  Vuex.mapState({age:'age', name: 'name'})
//

5. 對象展開運算符

mapState 函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢？通常，我們需要使用一個工具函數將多個對象合并為一個，以使我們可以將最終對象傳給 computed 屬性。但是自從有了對象展開運算符，我們可以極大地簡化寫法：

computed: {
  localComputed () { /* ... */ },

  // 使用對象展開運算符將此對象混入到外部對象中
  ...Vuex.mapState({
    // ...
  })
}

6. 小結

本節，我們帶大家學習了 Vuex 中 state 的使用方式。主要知識點有以下幾點：

  • 在 store 中定義 state 數據。
  • 通過 $store.state 訪問 state 中的數據。
  • 使用 mapState 輔助函數簡化獲取 state 中數據的寫法。