## Vuex
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的**狀態(tài)管理模式**嘱吗。
調(diào)試工具：vue devtools
> Vuex就像眼鏡：您自會知道什么時候需要它。
### 1俄讹，狀態(tài)
在商店中定義數(shù)據(jù)，在組件中直接使用：
目錄：`store / index.js`
```js
導(dǎo)出默認(rèn)的新Vuex.Store（{
? ? //狀態(tài)等于組件中的數(shù)據(jù)耻蛇，專門存放到堆積的數(shù)據(jù)
? ? 狀態(tài)：{
? ? ? ? 數(shù)：0
? ? }，
? ? 吸氣劑：{}跃捣，
? ? 變異：{}，
? ? 動作：{}娶聘，
? ? 模塊：{}
}）
```
目錄：`Home.vue`
html
<模板>
? <div class =“ home”>
? ? <h2>主頁頁面的數(shù)字：{{$ store.state.num}} </ h2>
? </ div>
</ template>
<腳本>
export default {
}
</script>
```
或者寫為：
```html
<template>
? <div class="about">
? ? <h2>About頁面的數(shù)字：{{num}}</h2>
? </div>
</template>
<script>
export default {
? computed: {
? ? num(){
? ? ? return this.$store.state.num
? ? }
? }
}
</script>
```
### 2、getters
將組件中統(tǒng)一使用的computed都放到getters里面來操作
目錄：`store/index.js`
```js
export default new Vuex.Store({
? ? // state相當(dāng)于組件中的data牺氨，專門用來存放全局的數(shù)據(jù)
? ? state: {
? ? ? ? num: 0
? ? },
? ? // getters相當(dāng)于組件中的computed酝豪，getters是全局的精堕，computed是組件內(nèi)部使用的
? ? getters: {
? ? ? ? getNum(state) {
? ? ? ? ? ? return state.num
? ? ? ? }
? ? },
? ? mutations: {},
? ? actions: {},
? ? modules: {}
})
```
目錄：`Home.vue`
```html
<template>
? <div class="home">
? ? <h2>Home頁面的數(shù)字：{{$store.getters.getNum}}</h2>
? </div>
</template>
<script>
export default {
}
</script>
```
### 3瘫证、mutations
更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。
目錄：`store/index.js`
```js
export default new Vuex.Store({
? ? // state相當(dāng)于組件中的data庄撮，專門用來存放全局的數(shù)據(jù)
? ? state: {
? ? ? ? num: 0
? ? },
? ? // getters相當(dāng)于組件中的computed背捌，getters是全局的，computed是組件內(nèi)部使用的
? ? getters: {
? ? ? ? getNum(state) {
? ? ? ? ? ? return state.num
? ? ? ? }
? ? },
? ? // mutations相當(dāng)于組件中的methods洞斯，但是它不能使用異步方法（定時器毡庆、axios）
? ? mutations: {
? ? ? ? // 讓num累加
? ? ? ? // payload是一個形參坑赡，如果組件在commit時，有傳這個參數(shù)過來么抗，就存在毅否，如果沒有傳過來，就是undefined
? ? ? ? increase(state, payload){
? ? ? ? ? ? state.num += payload ? payload : 1;
? ? ? ? }
? ? },
? ? actions: {},
? ? modules: {}
})
```
目錄：`Btn.vue`
```html
<template>
? ? <div>
? ? ? ? <button @click="$store.commit('increase', 2)">點擊加1</button>
? ? </div>
</template>
<script>
export default {
? methods: {
? ? ? /* addFn(){
? ? ? ? ? // 調(diào)用store中的mutations里的increase方法
? ? ? ? ? // 傳參的話蝇刀，使用payload
? ? ? ? ? this.$store.commit('increase', 2)
? ? ? } */
? }
}
</script>
```
### 4螟加、actions
actions是store中專門用來處理異步的站粟，實際修改狀態(tài)值的，還是mutations
目錄：`store/index.js`
```js
// 在store(倉庫)下的index.js這份文件，就是用來做狀態(tài)管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
? ? // state相當(dāng)于組件中的data，專門用來存放全局的數(shù)據(jù)
? ? state: {
? ? ? ? num: 0
? ? },
? ? // getters相當(dāng)于組件中的computed蹦渣，getters是全局的，computed是組件內(nèi)部使用的
? ? getters: {
? ? ? ? getNum(state) {
? ? ? ? ? ? return state.num
? ? ? ? }
? ? },
? ? // mutations相當(dāng)于組件中的methods，但是它不能使用異步方法（定時器涂屁、axios）
? ? mutations: {
? ? ? ? // 讓num累加
? ? ? ? // payload是一個形參帖族，如果組件在commit時，有傳這個參數(shù)過來，就存在，如果沒有傳過來，就是undefined
? ? ? ? increase(state, payload){
? ? ? ? ? ? state.num += payload ? payload : 1;
? ? ? ? },
? ? ? ? // 讓num累減
? ? ? ? decrease(state){
? ? ? ? ? ? state.num--;
? ? ? ? }
? ? },
? ? // actions專門用來處理異步，實際修改狀態(tài)值的，依然是mutations
? ? actions: {
? ? ? ? // 點擊了“減1”按鈕后，放慢一秒再執(zhí)行減法
? ? ? ? decreaseAsync(context){
? ? ? ? ? ? context.commit('decrease')
? ? ? ? }
? ? },
? ? modules: {}
})
```
目錄：`Btn.vue`
```html
<template>
? ? <div>
? ? ? ? <button @click="$store.commit('increase', 2)">點擊加1</button>
? ? ? ? <button @click="$store.dispatch('decreaseAsync')">點擊延遲減1</button>
? ? </div>
</template>
<script>
export default {
? methods: {
? ? ? /* addFn(){
? ? ? ? ? // 調(diào)用store中的mutations里的increase方法
? ? ? ? ? // 傳參的話棍好，使用payload
? ? ? ? ? this.$store.commit('increase', 2)
? ? ? }
? ? ? reduceFn(){
? ? ? ? ? this.$store.dispatch('decreaseAsync')
? ? ? } */
? }
}
</script>
```
### 5、輔助函數(shù)
mapState和mapGetters在組件中都是寫在computed里面
```html
<template>
<div>
? ? ? ? <h2>Home頁面的數(shù)字：{{num}}</h2>
? ? ? ? <h2>About頁面的數(shù)字：{{getNum}}</h2>
? ? </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
? computed: {
? ? ...mapState(['num'])
? ? ...mapGetters(['getNum'])
? }
}
</script>
```
mapMutations和mapActions在組件中都是寫在methods里面
```html
<template>
<div>
? ? ? ? <button @click="increase(2)">點擊加1</button>
? ? ? ? <button @click="decreaseAsync()">點擊延遲減1</button>
? ? </div>
</template>
<script>
import { mapMutations, mapActions } from 'vuex'
export default {
? methods: {
? ? ? ...mapMutations(['increase']),
? ? ? ...mapActions(['decreaseAsync'])
? }
}
</script>
```
### 6积糯、拆分寫法
store中的所有屬性跨嘉，都可以拆分成單獨的js文件來書寫
### 7、modules
我們的store可以認(rèn)為是一個主模塊嘱支，它下邊可以分解為很多子模塊，子模塊都可以單獨領(lǐng)出來寫，寫完再導(dǎo)入到主模塊中瞄桨。下面以 `users` 子模塊舉例：
將mutations中所有的方法乳讥，歸納起來淋硝。
目錄：`mutations_type.js`
```js
export const MUTATIONS_TYPE = {
? ? INCREASE: 'increase',
? ? DECREASE: 'decrease'
}
export default {
? ? // 讓num累加
? ? // payload是一個形參继谚，如果組件在commit時，有傳這個參數(shù)過來，就存在，如果沒有傳過來扒吁，就是undefined
? ? [MUTATIONS_TYPE.INCREASE](state, payload){
? ? ? ? state.num += payload ? payload : 1;
? ? },
? ? //讓num累減
? ? [MUTATIONS_TYPE.DECREASE]（州）{
? ? ? ? state.num--;
? ? }
}
```
目錄：`store / index.js`
```js
從'./mutaions_type'導(dǎo)入突變
導(dǎo)出默認(rèn)的新Vuex.Store（{
? ? ...
? ? 突變
? ? ...
}）
```
組件中：
html
<模板>
? <div class =“ about”>
? ? <h2>關(guān)于頁面的數(shù)字：{{getNum}} </ h2>
? ? <button @ click =“ increase（）”>關(guān)于的按鈕，點擊加1 </ button>
? </ div>
</ template>
<腳本>
從“ vuex”導(dǎo)入{mapGetters抖僵，mapMutations}
從'@ / store / mutaions_type.js'導(dǎo)入{MUTATIONS_TYPE}
導(dǎo)出默認(rèn)值{
? 計算值：{
? ? ... mapGetters（['getNum']）
? }呻征，
? 方法： {
? ? //方法一：
? ? ... mapMutations（[[MUTATIONS_TYPE.INCREASE]）
? ? //方法二：
? ? /* 增加（）{
? ? ? this灾锯。$ store.commit（MUTATIONS_TYPE.INCREASE）
? ? } * /
? }
}
</ script>
```
