1. 學(xué)習(xí)目標(biāo)
本小節(jié)我們會(huì)介紹數(shù)據(jù)管理工具 vuex锻霎。包括什么是 Vuex著角、Vuex 的安裝、以及如何創(chuàng)建和使用 Vuex 數(shù)據(jù)倉庫旋恼。
2. 什么是 Vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式吏口。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化冰更。
2.1 什么是狀態(tài)管理模式
讓我們從一個(gè)簡單的 Vue 計(jì)數(shù)應(yīng)用開始：
實(shí)例演示
<!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)行案例" 可查看在線運(yùn)行效果
這個(gè)狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：
- state产徊，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
- view冬殃，以聲明方式將 state 映射到視圖囚痴；
- actions叁怪，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化审葬。
以下是一個(gè)表示 “單向數(shù)據(jù)流” 理念的簡單示意：
但是，當(dāng)我們的應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)奕谭，單向數(shù)據(jù)流的簡潔性很容易被破壞：
- 多個(gè)視圖依賴于同一狀態(tài)涣觉。
- 來自不同視圖的行為需要變更同一狀態(tài)。
對(duì)于問題一血柳，傳參的方法對(duì)于多層嵌套的組件將會(huì)非常繁瑣官册，并且對(duì)于兄弟組件間的狀態(tài)傳遞無能為力。對(duì)于問題二难捌，我們經(jīng)常會(huì)采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝膝宁。以上的這些模式非常脆弱鸦难，通常會(huì)導(dǎo)致無法維護(hù)的代碼。
因此员淫，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來合蔽，以一個(gè)全局單例模式管理呢？在這種模式下介返，我們的組件樹構(gòu)成了一個(gè)巨大的 “視圖”拴事，不管在樹的哪個(gè)位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為圣蝎！
通過定義和隔離狀態(tài)管理中的各種概念并通過強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性刃宵，我們的代碼將會(huì)變得更結(jié)構(gòu)化且易維護(hù)。
2.2 什么時(shí)候使用 Vuex
Vuex 可以幫助我們管理共享狀態(tài)徘公，并附帶了更多的概念和框架牲证。這需要對(duì)短期和長期效益進(jìn)行衡量。
如果您不打算開發(fā)大型單頁應(yīng)用步淹，使用 Vuex 可能是繁瑣冗余的从隆。確實(shí)是如此 —— 如果您的應(yīng)用夠簡單，您最好不要使用 Vuex缭裆。一個(gè)簡單的 store 模式就足夠您所需了键闺。但是，如果您需要構(gòu)建一個(gè)中大型單頁應(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)中挎塌，您必須顯式地通過 Vue.use() 來安裝 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)，不需要以上安裝過程内边。
4. 基本示例
每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）榴都。“store” 基本上就是一個(gè)容器漠其，它包含著你的應(yīng)用中大部分的狀態(tài) (state)嘴高。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：
- Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候和屎，若 store 中的狀態(tài)發(fā)生變化拴驮，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
- 你不能直接改變 store 中的狀態(tài)柴信。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation套啤。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用随常。
最簡單的store:
實(shí)例演示
<!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)行案例" 可查看在線運(yùn)行效果
代碼解釋
在 JS 代碼第 4-8 行潜沦，通過 new Vuex.Store ({…}) 創(chuàng)建數(shù)據(jù)倉庫萄涯。
在 JS 代碼第 12 行，我們可以通過 store.state.count 訪問倉庫中定義的數(shù)據(jù)唆鸡。
5. 小結(jié)
本節(jié)窃判，我們帶大家學(xué)習(xí)了 vuex 的基本概念。主要知識(shí)點(diǎn)有以下幾點(diǎn)：
- Vuex 是一個(gè)數(shù)據(jù)管理工具喇闸，我們可以通過它簡化組件間的數(shù)據(jù)共享問題袄琳。
- Vuex 的安裝和使用方法。
- 使用 new Vuex.Store ({…}) 創(chuàng)建數(shù)據(jù)倉庫燃乍。
