一、基本介紹

vuex是一個(gè)專為vue.js的SPA但也組件化應(yīng)用程序開發(fā)的狀態(tài)管理模式插件。

由于vue SPA的應(yīng)用的模塊化，每個(gè)組件都有它各自的數(shù)據(jù)(state)、界面(view)、和方法(actions)。這些數(shù)據(jù)、界面和方法分布在各個(gè)組件中，當(dāng)項(xiàng)目內(nèi)用變得越來越多時(shí)，每個(gè)組件中的狀態(tài)會(huì)變得很難管理。這時(shí)vuex就派上用場了

1.單個(gè)組件中的狀態(tài)

假如值時(shí)在單個(gè)逐漸中要改變界面view很簡單，之需要改變state數(shù)據(jù)源即可。如下代碼：

單個(gè)組件

所以，單個(gè)組件中的原理圖是這樣的：

單個(gè)組件的原理圖

2.多個(gè)組件中的狀態(tài)

然而，我們作為組件化SPA應(yīng)用，必定會(huì)牽扯到多個(gè)組件間的通信。

比如有兩個(gè)相同的組件A和B，他們共享一個(gè)數(shù)據(jù)count，并且都有一個(gè)方法可以操作這個(gè)count，我們使用vuex來寫。

A組件和B組件的代碼(代碼相同)

多個(gè)組件

可以看到這里的兩個(gè)increment按鈕點(diǎn)擊都會(huì)同時(shí)改變兩個(gè)count的數(shù)據(jù)，因?yàn)閿?shù)據(jù)源count和方法increment都是全局的。

正如下圖官方原理圖所畫的，我們把全局?jǐn)?shù)據(jù)源state、改變數(shù)據(jù)源的方法mutations、異步操作方法actions都放提取出來放到store中，實(shí)現(xiàn)全局?jǐn)?shù)據(jù)狀態(tài)單獨(dú)管理的功能。

vuex官方原理圖

二、安裝和配置

1.安裝vuex

使用npm安裝并保存到package.json中：

安裝

package.json

2.配置

配置方式和路由的配置方式差不多

配置方式