vuex是乙個專為vue.js應用程式開發的狀態管理模式。
當我們構建乙個中大型的單頁面應用程式時，vuex可以更好的幫助我們在元件外部統一管理狀態
state
getters
mutations
actions
modules
其中state和mutations在任何專案都會接觸到的核心概念。為什麼說這兩個是最核心的呢？
第一、首先state是我們唯一的資料來源，也就是說我們需要把元件裡面的一些狀態提取出來放到state裡面去，state是我們唯一的載體，我們必須要去定義我們的state，這是至關重要的。
第二、**怎麼去改變state裡面的值呢？**比如說如何去修改購物車裡面的商品數量，我們在商品列表裡面+1，在購物車列表裡面把他刪掉，它就要-1,那麼從哪去操作這個state，就通過mutations,mutations是唯一可以提交和改變狀態的。
因此這兩個狀態是我們必須要掌握的。
getters、actions、modules，如果我們的專案不是太過於複雜，那麼僅僅使用state和mutations這兩就可以滿足業務需求了。
接來下我們來分別來看看這幾個狀態。
1、什麼是state，我也提到過，我們每乙個元件裡面的data裡面的變數我們都稱之為state,state也是我們整個vue整個核心的概念，這也就是告訴我們的開發者，vue是乙個漸進式的框架，我們的使用狀態去管理和操作我們的dom，改變我們的ui，不是使用過去的那種直接操作dom的方式。所以說state是我們vuex裡面的乙個核心的概念，他在vuex裡面也是乙個核心的概念。
state是唯一的資料來源，也就是它是唯一的載體，我們需要把任何乙個需要抽取出來的變數，都要放到我們的state裡面去來進行管理，那麼我們在任何乙個頁面都可以取到它。
單一的狀態樹，什麼是單一的狀態樹，也是說我們通過定義乙個store的例項，那麼這個store例項裡面只有乙個state，單一的狀態樹，它不像我們的vue元件裡面還可以巢狀另乙個元件，另乙個元件裡面還可以巢狀n的元件，這樣它是乙個很有層級的關係的東西；
但是我們這個vuex，其實很單一，它就是一棵樹，這棵樹這個store物件只要註冊到我們的main.js裡面，只要被我們的vue註冊之後，vue裡面所有層級關係的元件都可以使用，它是比較單一的一顆狀態樹。
我們看下列元件，這是乙個定時器的元件，他裡面包括乙個模板，我們可以看到模板裡面用到count這麼乙個屬性，我們可以看到它裡面有個computed的計算屬性，這個computed計算屬性也就是說，當我們裡面的變數發生變化了以後，它都會時時的進行計算，最後來渲染我們的檢視。
我們可以看到它裡面定義了count這麼乙個函式，computed裡面必須都是函式，在計算屬性裡面它每個字段對應的都是函式，我們模板裡面的count對應就是computed裡面的count方法；當模板裡面的count發生變化的時候，computed裡面的count就會時時計算，計算完了就渲染到模板對應的位置。
// 建立乙個 counter 元件
const counter =}`
, computed:
}}
通過getters可以派生出一些新的狀態；我們看下面的例子：
我們new乙個vuex的例項，這種方式就是定義vuex的例項，
const store =
newvuex.store(,
]}, getters:}}
)
更改vuex的store中的狀態的唯一方法是提交mutation。
我們看一下下列例子
const store =
newvuex.store(,
mutations:}}
)
mutations裡面只定義了函式，函式內部給值加1；但是需要有些地方去觸發它
//通過方法觸發
store.
commit
('increment'
)//去提交這個函式，這樣我們的值才能去加1；
就會把購物車的數量++；每個頁面裡面購物車數量都會++；這就是我們mutations的功能；
action提交的是mutation,而不是直接變更狀態
也就是說我們的狀態值需要通過mutation來提交;那麼mutation它可以通過action來提交;
action可以包含冉義非同步操作
我們來看看下面的例子：
const store =
newvuex.store(,
mutations:},
actions:}}
)
好像顯得有點多餘，確實有點多餘；但是有一種場景它是不多餘的；就是mutation的函式必須是同步的；而action可以做任意非同步的操作；
面對複雜的應用程式，當管理的狀態比較多時；我們需要將vuex的store物件分割成模組(modules)。
下面我們來看乙個例子：
const modulea =
, mutations:
, actions:
, getters:
}const moduleb =
, mutations:
, actions:
}const store =
newvuex.store(}
) store.state.a // -> modulea 的狀態
store.state.b // -> moduleb 的狀態
快速了解VUEX。為什麼要用vuex
vuex是vue框架中的狀態機，通俗一點vuex是個專門管理資料的倉庫。vuex主要有5個屬性,state getter action mutation module vuex中的state裡面存放資料源，state裡面存放的資料是響應式的，如果倉庫裡的資料發生變化，那依賴這個資料的元件也會發生更新...
Vuex 快速入門 簡單易懂
一 vuex介紹 1 vuex是什麼？1.借鑑 了flux redux the elm architecture 2.專為 vue.js 設計 的狀態管理模式 3.集中式儲存和管理應用程式中所有元件的狀態 4.vuex 也整合到 vue 的官方除錯工具 5.乙個 vuex 應用的核心是 store ...
快速學會Vuex的使用
一 vuex簡介 官方定義 vuex是乙個專門為vue.js應用程式開的狀態管理模式 它採用集中式儲存管理應用的所有元件的狀態 並以相應的規則保證以一種可 的方式發生變化 二 應用場景 多個檢視依賴於同一狀態 來自不同檢視的行為需要改變同乙個狀態 三 vuex組成介紹 state 資料倉儲，儲存所有...