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

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

Vuex 簡介、安裝

1. 簡介

本小節我們會介紹數據管理工具 vuex。包括什么是 Vuex、Vuex 的安裝、以及如何創建和使用 Vuex 數據倉庫。

2. 什么是 Vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

2.1 什么是狀態管理模式

讓我們從一個簡單的 Vue 計數應用開始：

實例演示
預覽 復制
復制成功！
<!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>
      <button @click="increase">添加一次</button>
      <button @click="decrease">減少一次</button>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data() {
    	return {
        count: 0
      }
    },
    methods: {
      increase() {
        this.count++
      },
      decrease() {
        this.count--
      }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

這個狀態自管理應用包含以下幾個部分：

  • state，驅動應用的數據源；
  • view，以聲明方式將 state 映射到視圖；
  • actions，響應在 view 上的用戶輸入導致的狀態變化。

以下是一個表示 “單向數據流” 理念的簡單示意：

圖片描述
但是，當我們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

  • 多個視圖依賴于同一狀態。
  • 來自不同視圖的行為需要變更同一狀態。

對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態傳遞無能為力。對于問題二，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。

因此，我們為什么不把組件的共享狀態抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構成了一個巨大的 “視圖”，不管在樹的哪個位置，任何組件都能獲取狀態或者觸發行為！

通過定義和隔離狀態管理中的各種概念并通過強制規則維持視圖和狀態間的獨立性，我們的代碼將會變得更結構化且易維護。

2.2 什么時候使用 Vuex

Vuex 可以幫助我們管理共享狀態，并附帶了更多的概念和框架。這需要對短期和長期效益進行衡量。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此 —— 如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。

3. 安裝 Vuex

3.1 直接下載

我們可以在官網 (vuex) 上直接下載 vuex。
在 Vue 之后引入 vuex 會進行自動安裝：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="/path/to/vuex.js"></script>

3.2 CDN 引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>

3.3 NPM 或 Yarn

npm install vuex --save
yarn add vuex

在一個模塊化的打包系統中，您必須顯式地通過 Vue.use() 來安裝 Vuex：

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

Vue.use(Vuex)

當使用全局 script 標簽引用 Vuex 時，不需要以上安裝過程。

4. 基本示例

每一個 Vuex 應用的核心就是 store（倉庫）?！皊tore” 基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同：

  1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
  2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。
    最簡單的 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">{{count}}</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',
    created() {
      console.log(store.state.count)
    },
    computed: {
	    count() {
		    return store.state.count
	    }
    }
  })
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋
在 JS 代碼第 4-8 行，通過 new Vuex.Store ({…}) 創建數據倉庫。
在 JS 代碼第 12 行，我們可以通過 store.state.count 訪問倉庫中定義的數據。

5. 小結

本節，我們帶大家學習了 vuex 的基本概念。主要知識點有以下幾點：

  • Vuex 是一個數據管理工具，我們可以通過它簡化組件間的數據共享問題。
  • Vuex 的安裝和使用方法。
  • 使用 new Vuex.Store ({…}) 創建數據倉庫。