什么是vuex嗓袱？
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式胳施。它采用集中式存儲(chǔ)管理應(yīng)
用的所有組件的狀態(tài)花沉，以利用 Vue.js 的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更
新况凉。并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化谨湘。借鑒 了Flux绽快、Redux、 The Elm Architecture
一個(gè) Vuex 應(yīng)用的核心是 store（倉庫紧阔，一個(gè)容器）谎僻，store包含著你的應(yīng)用中大部分的狀態(tài) (state)。
4.Vuex 也集成到 Vue 的官方調(diào)試工具https://github.com/vuejs/vue-devtools
什么情況下應(yīng)該使用 Vuex寓辱？
- 不適用：小型簡(jiǎn)單應(yīng)用，用 Vuex 是繁瑣冗余的赤拒，更適合使用簡(jiǎn)單的組件通信秫筏。
- 適用于：如果狀態(tài)較多的項(xiàng)目都會(huì)用到Vuex诱鞠，更加的方便，如果組件嵌套層級(jí)過深这敬、多個(gè)組件依賴了同一個(gè)狀態(tài)航夺，那么必然要使用Vuex更加的方便
其實(shí)在實(shí)際開發(fā)的項(xiàng)目中， 都是Vuex和組件通信混合的
安裝：
npm install vue
npm install vuex
使用：
1.引入vue import Vue from "vue"
2.引入vuex import Vuex from "vuex"
3. Vue.use(Vuex)
4.定義一個(gè)容器 const store=new Vuex.Store({ // （注意）：在應(yīng)用中是唯一的崔涂，只能定義一個(gè)
})
5.記住一定得導(dǎo)出 export default store
6.注意還得把自定義的store注入到Vue的根實(shí)例中也就是main.js中 new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
核心概念：
Store
- 相當(dāng)于一個(gè)容器阳掐，里面包含了應(yīng)用的大部分的狀態(tài)（state）
- 狀態(tài)存儲(chǔ)只能是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候冷蚂，若 store 中的狀態(tài)發(fā)生變化缭保，那么相應(yīng)的組件也會(huì)得到高效更新。
State
- state為vuex的狀態(tài)存儲(chǔ)蝙茶，vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的艺骂，應(yīng)用中的大部分狀態(tài)都存儲(chǔ)在state中
//在state中定義狀態(tài)
const store = new Vuex.Store({
state: {
shopList:[
{
id：1,
count:1,
price:￥12,
name:'魚香肉絲'
},
{
id：2,
count:3,
price:￥10,
name:'大盤雞'
},
{
id：3,
count:3,
price:￥20,
name:'煎餅果子'
},
] // 這里的 shopList 就是狀態(tài)，之前稱之為數(shù)據(jù) （數(shù)據(jù) === 狀態(tài)）
}
})
//( 要使用的時(shí)候 ) 在要使用定義的狀態(tài)的組件中
//通過計(jì)算屬性（computed）去獲取倉庫中定義的數(shù)據(jù)
computed: {
getShopList () {
return this.$store.state.shopList
}
}
Getter
有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)隆夯，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)：
如果有多個(gè)組件需要用到此屬性钳恕，我們要么復(fù)制這個(gè)函數(shù)，或者抽取到一個(gè)共享函數(shù)然后在多處導(dǎo)入它——無論哪種方式都不是很理想蹄衷。
Vuex 允許我們?cè)?store 中定義“getter”（可以認(rèn)為是 store 的計(jì)算屬性）忧额。就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來愧口，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算睦番。
Getter 接受 state 作為其第一個(gè)參數(shù)：
const store = new Vuex.Store({
//State
state: {
shopList:[
{
id：1,
count:1,
price:￥12,
name:'魚香肉絲'
},
{
id：2,
count:3,
price:￥10,
name:'大盤雞'
},
{
id：3,
count:3,
price:￥20,
name:'煎餅果子'
},
] // 這里的 shopList 就是狀態(tài)，之前稱之為數(shù)據(jù) （數(shù)據(jù) === 狀態(tài)）
}
})
//Getters
getters:{
//總價(jià)
totalPrice (state) {
let price=0
state.ShopList.map(item=>{
price+=item.price*item.count
})
return price
}
}
})
//通過計(jì)算屬性（computed）去獲取倉庫中定義的數(shù)據(jù)
computed: {
getShopList () {
return this.$store.state.shopList
},
getTotalPrice(){
return this.$store.getters
}
}
Mutation
- 更改 Vuex 的 store 中的狀態(tài)（state）的唯一方法是通過commit提交 mutation
//在組件中
this.$store.commit('addIncrement', 5)
const store = new Vuex.Store({
//State
state: {
shopList:[
//同上
] // 這里的 shopList 就是狀態(tài)调卑，之前稱之為數(shù)據(jù) （數(shù)據(jù) === 狀態(tài)）
}
})
//Mutations
mutations:{
addIncrement(state,5){
//操作邏輯
}
}
//Getters
getters:{
//同上
}
})
Action
Action 類似于 mutation抡砂，不同在于：
- Action 提交的是 mutation，而不是直接變更狀態(tài)恬涧。
- Action 可以包含任意異步操作注益。
讓我們來注冊(cè)一個(gè)簡(jiǎn)單的 action：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation溯捆，或者通過 context.state 和 context.getters 來獲取 state 和 getters丑搔。當(dāng)我們?cè)谥蠼榻B到 Modules 時(shí)，你就知道 context 對(duì)象為什么不是 store 實(shí)例本身了提揍。
Module
由于使用單一狀態(tài)樹啤月，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)劳跃，store 對(duì)象就有可能變得相當(dāng)臃腫谎仲。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）刨仑。每個(gè)模塊擁有自己的 state郑诺、mutation夹姥、action、getter辙诞、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：
通過computed取值的時(shí)候需要加上子模塊的名稱辙售，除此之外都無需添加子模塊名稱
詳解請(qǐng)到Modules
