一、什麼是vuex?
vuex是乙個專為vue.js應用程式開發的狀態管理模式。
當我們構建乙個中大型的單頁面應用程式時，vuex可以更好的幫助我們在元件外部統一管理狀態。
二、vuex的五個核心概念
state
getters
mutations
actions
modules
其中state和mutations在任何專案都會接觸到的核心概念。為什麼說這兩個是最核心的呢？
第一、首先state是我們唯一的資料來源，也就是說我們需要把元件裡面的一些狀態提取出來放到state裡面去，state是我們唯一的載體，我們必須要去定義我們的state，這是至關重要的。
第二、怎麼去改變state裡面的值呢？比如說如何去修改購物車裡面的商品數量，我們在商品列表裡面+1，在購物車列表裡面把他刪掉，它就要-1,那麼從哪去操作這個state，就通過mutations,mutations是唯一可以提交和改變狀態的。
因此這兩個狀態是我們必須要掌握的。
getters、actions、modules，如果我們的專案不是太過於複雜，那麼僅僅使用state和mutations這兩就可以滿足業務需求了。
接來下我們來分別來看看這幾個狀態。
首先第乙個： state
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
通過getters可以派生出一些新的狀態；我們看下面的例子：
我們new乙個vuex的例項，這種方式就是定義vuex的例項，
const store = new vuex.store(,]},
getters:
}})
接下來我們來看一下mutations
更改vuex的store中的狀態的唯一方法是提交mutation
我們看一下下列例子
const store = new vuex.store(,
mutations:
}})
mutations裡面只定義了函式，函式內部給值加1；但是需要有些地方去觸發它
//那就是通過
store.commit('increment') //去提交這個函式，這樣我們的值才能去加1；
就會把購物車的數量++；每個頁面裡面購物車數量都會++；這就是我們mutations的功能；
接下來我們來看下actions
action提交的是mutation,而不是直接變更狀態
也就是說我們的狀態值需要通過mutation來提交;那麼mutation它可以通過action來提交;
action可以包含冉義非同步操作
我們來看看下面的例子：
const store = new vuex.store(,
mutations:
},actions:
}})
好像顯得有點多餘，確實有點多餘；但是有一種場景它是不多餘的；就是mutation的函式必須是同步的；而action可以做任意非同步的操作；
最後我們來了解一下modules
面對複雜的應用程式，當管理的狀態比較多時；我們需要將vuex的store物件分割成模組(modules)。
下面我們來看乙個例子：
const modulea = ,
mutations: ,
actions: ,
getters:
}const moduleb = ,
mutations: ,
actions:
}const store = new vuex.store(
})store.state.a // -> modulea 的狀態
store.state.b // -> moduleb 的狀態
下面我們再來看看我們的專案結構
├── index.html
├── main.js
├── api
│ └── ... # 抽取出api請求
├── components
│ └── ...
└── store
├── index.js # 我們組裝模組並匯出 store 的地方
├── actions.js # 根級別的 action
├── mutations.js # 根級別的 mutation
└── modules
├── cart.js # 購物車模組
└── products.js # 產品模組
Vuex簡單介紹
vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可 的方式發生變化 vuex主要有兩個作用 1 全域性資料儲存和狀態管理，vuex 的狀態儲存是響應式的。當 vue 元件從 store 中讀取狀態的時候，若 sto...
vuex簡單介紹
一 什麼是vuex vuex是vue的狀態管理模式 專案中需要共享一些資料，vux就是把這些資料集中管理起來的容器，這些資料就叫做狀態，比如乙個使用者的使用者名稱，性別，許可權等 二 vuex的核心概念 state 定義 new vuex.store 在vue元件中使用 a.直接呼叫 this.st...
vuex基本使用
使用vuex 1.安裝vuex，搭建手腳架 npm i vuex s2.建立乙個store資料夾，在該資料夾中建立乙個index.js檔案 2.1引入相應的檔案 import vue from vue import vuex from vuex 2.2使用vuex vue.use vuex 3.建立...