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

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

Vuex 簡(jiǎn)介、安裝

1. 簡(jiǎn)介

本小節(jié)我們會(huì)介紹數(shù)據(jù)管理工具 vuex。包括什么是 Vuex、Vuex 的安裝、以及如何創(chuàng)建和使用 Vuex 數(shù)據(jù)倉(cāng)庫(kù)。

2. 什么是 Vuex

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

2.1 什么是狀態(tài)管理模式

讓我們從一個(gè)簡(jiǎn)單的 Vue 計(jì)數(shù)應(yīng)用開(kāi)始：

實(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> {{ 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>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

這個(gè)狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：

  • state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
  • view，以聲明方式將 state 映射到視圖；
  • actions，響應(yīng)在 view 上的用戶(hù)輸入導(dǎo)致的狀態(tài)變化。

以下是一個(gè)表示 “單向數(shù)據(jù)流” 理念的簡(jiǎn)單示意：

圖片描述
但是，當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，單向數(shù)據(jù)流的簡(jiǎn)潔性很容易被破壞：

  • 多個(gè)視圖依賴(lài)于同一狀態(tài)。
  • 來(lái)自不同視圖的行為需要變更同一狀態(tài)。

對(duì)于問(wèn)題一，傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣，并且對(duì)于兄弟組件間的狀態(tài)傳遞無(wú)能為力。對(duì)于問(wèn)題二，我們經(jīng)常會(huì)采用父子組件直接引用或者通過(guò)事件來(lái)變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會(huì)導(dǎo)致無(wú)法維護(hù)的代碼。

因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式管理呢？在這種模式下，我們的組件樹(shù)構(gòu)成了一個(gè)巨大的 “視圖”，不管在樹(shù)的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！

通過(guò)定義和隔離狀態(tài)管理中的各種概念并通過(guò)強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性，我們的代碼將會(huì)變得更結(jié)構(gòu)化且易維護(hù)。

2.2 什么時(shí)候使用 Vuex

Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對(duì)短期和長(zhǎng)期效益進(jìn)行衡量。

如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此 —— 如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex。一個(gè)簡(jiǎn)單的 store 模式就足夠您所需了。但是，如果您需要構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇。

3. 安裝 Vuex

3.1 直接下載

我們可以在官網(wǎng) (vuex) 上直接下載 vuex。
在 Vue 之后引入 vuex 會(huì)進(jìn)行自動(dòng)安裝：

<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/vuex@3.1.2/dist/vuex.js"></script>

3.3 NPM 或 Yarn

npm install vuex --save
yarn add vuex

在一個(gè)模塊化的打包系統(tǒng)中，您必須顯式地通過(guò) Vue.use() 來(lái)安裝 Vuex：

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

Vue.use(Vuex)

當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)，不需要以上安裝過(guò)程。

4. 基本示例

每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）?！皊tore” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：

  1. Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
  2. 你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
    最簡(jiǎn)單的 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">{{count}}</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: {
      count: 12
    }
  })
  var vm = new Vue({
    el: '#app',
    created() {
      console.log(store.state.count)
    },
    computed: {
	    count() {
		    return store.state.count
	    }
    }
  })
</script>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋
在 JS 代碼第 4-8 行，通過(guò) new Vuex.Store ({…}) 創(chuàng)建數(shù)據(jù)倉(cāng)庫(kù)。
在 JS 代碼第 12 行，我們可以通過(guò) store.state.count 訪問(wèn)倉(cāng)庫(kù)中定義的數(shù)據(jù)。

5. 小結(jié)

本節(jié)，我們帶大家學(xué)習(xí)了 vuex 的基本概念。主要知識(shí)點(diǎn)有以下幾點(diǎn)：

  • Vuex 是一個(gè)數(shù)據(jù)管理工具，我們可以通過(guò)它簡(jiǎn)化組件間的數(shù)據(jù)共享問(wèn)題。
  • Vuex 的安裝和使用方法。
  • 使用 new Vuex.Store ({…}) 創(chuàng)建數(shù)據(jù)倉(cāng)庫(kù)。