一往产、基本介紹
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)目?jī)?nèi)用變得越來越多時(shí)衣迷，每個(gè)組件中的狀態(tài)會(huì)變得很難管理畏鼓。這時(shí)vuex就派上用場(chǎng)了
1.單個(gè)組件中的狀態(tài)
假如值時(shí)在單個(gè)逐漸中要改變界面view很簡(jiǎn)單，之需要改變state數(shù)據(jù)源即可壶谒。如下代碼：
所以云矫，單個(gè)組件中的原理圖是這樣的：
2.多個(gè)組件中的狀態(tài)
然而，我們作為組件化SPA應(yīng)用汗菜，必定會(huì)牽扯到多個(gè)組件間的通信让禀。
比如有兩個(gè)相同的組件A和B挑社，他們共享一個(gè)數(shù)據(jù)count，并且都有一個(gè)方法可以操作這個(gè)count巡揍，我們使用vuex來寫痛阻。
A組件和B組件的代碼(代碼相同)
可以看到這里的兩個(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ú)管理的功能。
二啤斗、安裝和配置
1.安裝vuex
使用npm安裝并保存到package.json中：
2.配置
配置方式和路由的配置方式差不多
