Vuex教程

一、概覽
1、Vuex是什么

• 專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式（狀態(tài)即數(shù)據(jù)，即數(shù)據(jù)管理）
• 采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)
• 以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化
  2、狀態(tài)
• 組件內(nèi)部狀態(tài)：僅在一個(gè)組件內(nèi)使用的狀態(tài)( 即data字段里的數(shù)據(jù)，不能共享，只在本組件使用 )
• 應(yīng)用級(jí)別狀態(tài)：多個(gè)組件共用的狀態(tài)（將這個(gè)狀態(tài)放入vuex中進(jìn)行管理）
  3、什么情況下使用Vuex
• 多個(gè)視圖（組件）依賴同一狀態(tài)
• 來(lái)自不同視圖（組件）的行為需要變更同一狀態(tài)

二、Vuex核心概念
1、store：類似容器，包含應(yīng)用的大部分狀態(tài)

• 一個(gè)頁(yè)面只能有一個(gè)容器
• 狀態(tài)存儲(chǔ)是響應(yīng)式的
• 不能直接改變store中的狀態(tài)，唯一途徑顯示地提交mutations
• 在actions里面，也不能直接更改state里面的狀態(tài)值，必須先定義一個(gè)mutations，然后在actions里面commit這個(gè)mutations，從而來(lái)更改state的狀態(tài)值；如果要再次請(qǐng)求異步，那么就是dispatch一個(gè)actions
  2、State：包含所有應(yīng)用級(jí)別狀態(tài)的對(duì)象
  3、Getters：在組件內(nèi)部獲取store中狀態(tài)的函數(shù)，類似組件的計(jì)算屬性computed
  4、Mutations：唯一修改狀態(tài)的事件回調(diào)函數(shù)，默認(rèn)是同步的，如果要異步就使用Actions
  5、Actions：包含異步操作、提交mutations改變狀態(tài)
  6、Modules：將store分割成不同的模塊

三、使用Vuex

1、安裝Vuex模塊
npm install vuex --save
2、作為插件使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3、定義容器
let store = new Vuex.Store({
    state:{
        count:100
    },
    mutations:{  //對(duì)象，里面是各種更改state狀態(tài)值的函數(shù)，同步立即更改狀態(tài)
        add( state,payload ){  //參數(shù)state就是上面的state，payload是要傳遞的值
            state.count+=payload.n;
        }
    },  
    actions:{  //異步更改狀態(tài)，可以是ajax請(qǐng)求成功之后改變狀態(tài)，這里用定時(shí)器模擬，1秒鐘之后提交mutations改變狀態(tài)
        //異步的更改狀態(tài)是直接在index.js里面的actions里面定義action然后commit的(附帶參數(shù))，而不是在組件內(nèi)提交，注意區(qū)別，異步是在組件內(nèi)dispatch這個(gè)actions(actions里面已經(jīng)包含了mutations)，同步是在組件內(nèi)commit這個(gè)mutations(附帶參數(shù))
        //異步也可以在index.js里面直接dispatch這個(gè)actions(附帶參數(shù))，在第一個(gè)ajax里面接著請(qǐng)求第二個(gè)ajax
        addAction( context ){  //ajax1
            setTimeout(function(){
                context.commit('add',{n:200});  //這里用的mutations還是上面定義的add
                context.dispatch('textAction',{test:'測(cè)試'})  //觸發(fā)ajax2
            },1000)
        }
        textAction( context,obj ){  //ajax2
            console.log(obj)
        }

        //利用es6解構(gòu)賦值改寫(xiě)上面的代碼，因?yàn)閏ontext對(duì)象下面有commit和dispatch方法
        addAction( {commit,dispatch} ){
            setTimeout(function(){
                commit('add',{n:200});   //直接可以獲取到commit方法，不用是context.commit
                dispatch('textAction',{test:'測(cè)試'}) 
            },1000)
        }
        textAction( context,obj ){  //ajax2
            console.log(obj)
        }

    },//異步更改狀態(tài),一段時(shí)間之后再改變狀態(tài)，只要是異步的改變都寫(xiě)在actions里面
    getters:{ //類似計(jì)算屬性，對(duì)狀態(tài)做進(jìn)一步的處理
        filterCount(state){
            return state.count>=120?120:state.count++;
        }
    }  
})
export default store
4、注入根實(shí)例
import store from './store'
new Vue({
    store
})

5、在state里面定義的是狀態(tài)，如果在組件內(nèi)部要使用這個(gè)狀態(tài)，那么一般在組件內(nèi)部通過(guò)計(jì)算屬性來(lái)得到它

<button @click="addHandle()"></button>
<p>{{count}}</p>
<p>{{count2}}</p>
computed:{
    count(){
        return this.$store.state.count
    },
    count2(){
        return this.$store.getters.filterCount  //被getters進(jìn)一步處理過(guò)的狀態(tài)
    }
},
methods:{
    addHandle(){  //要?jiǎng)討B(tài)的改變狀態(tài)，就需要顯示的提交一個(gè)mutations —> add
        //同步，寫(xiě)法一
        this.$store.commit('add',{n:10})
        //同步，寫(xiě)法二
        this.$store.commit({
            type:'add',
            n:5
        })
        //異步，寫(xiě)法
        this.$store.dispatch('addAction')
    }
}

6、context是一個(gè)對(duì)象，不是state實(shí)例

7、使用輔助函數(shù)

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

//這是改寫(xiě)state和getters
computed:{
    num(){
        return this.$store.state.count
    },
    num2(){
        return this.$store.getters.filterNum
    }
}
computed:mapState({
    num:state => state.count
    num:'count'
    num(state){
        return state.count+100
    }
    count:'count'  //此時(shí)渲染的是count，不是num
})
computed:{
    abc(){
        return 123
    },
    ...mapGetters({
        num2:'filterCount'  //如果key值（即要渲染到頁(yè)面的變量值）和vuex里面定義的是一樣的，那么就可以是下面那種寫(xiě)法
    }),
    ...mapState(['count'])  //count:count     count是要渲染到頁(yè)面   state:{count:100}，state里面定義的狀態(tài)名也是count
}

//這是改寫(xiě)actions和mutations
methods:{
    add(){  //異步actions
        this.$store.dispatch('addAction')
    }
},
reduce(){  //普通mutations，參數(shù)可以直接跟在對(duì)象里
    this.$store.commit({
        type:'reduceMutation',
        n:10
    })
}

methods:{
    ...mapActions({
        add:'addAction'  //add是頁(yè)面點(diǎn)擊函數(shù)，addAction是vuex里面定義的action
    })
    ...mapMutations({  //這種方法要傳參，只能是在調(diào)用的時(shí)候傳進(jìn)去
        reduce:'reduceMutation'
    })
}

<input type="button" value="-" @click="reduce({n:10})">  參數(shù)在這里傳，和普通寫(xiě)法不同

四、案例

**index.js**

let store = new Vuex.Store({
    state:{  //對(duì)象，應(yīng)用所需要的狀態(tài)數(shù)據(jù)都放在這里面
        count:100
    },
    mutations:{  //對(duì)象，顯示的同步提交mutations，狀態(tài)是點(diǎn)擊之后立即改變
        addIncrement(state,payload){  //這里是自定義addIncrement事件
            state.count+ = payload.n
        }
    },
    actions:{  //異步的改變狀態(tài)，比如發(fā)送請(qǐng)求成功之后才改變狀態(tài)，不是即時(shí)的改變
        addAction( context ){  //這里新加自定義事件addAction
            setTimeout( ()=>{  /模擬異步操作
            //改變狀態(tài)，提交mutations，仍然是上面mutations里面定義的事件addIncrement
                context.commit('addIncrement',{n:15})
                context.dispatch('textAction',{test:'測(cè)試'})  //這里執(zhí)行該異步操作
            },1000 )
        },
        textAction(context,obj){  //定義第二個(gè)異步操作
            console.log(obj)  //{test:'測(cè)試'}
        },
        getListAction( context ){  //這里定義了異步接口action，在子組件created里面調(diào)用
            axios.get('url')
            .then( (data)=>{
                console.log(data);  //得到了接口數(shù)據(jù)
            } )
        }
    },
    getters:{  //對(duì)store里面的數(shù)值進(jìn)行邏輯操作
        filterState(state){
            return state.count>=120?120:state.count
        }
    }
})
export default store

**increment組件：**

<template>
    <p>{{num}}</p>
    <span>{{filterNewNum}}</span>
    <input type="button" value="+" @click="addHandle" />
</template>
<script>
    computed:{
        num(){
            rerurn this.$store.state.count  //接收原始狀態(tài)值
        },
        filterNewNum(){  //這里面接收過(guò)濾后的，倉(cāng)庫(kù)里面的數(shù)據(jù)
            return this.$store.getters.filterState //注意是return，不要漏了
        }
    },
    methods:{
        addHandle(){  //改變狀態(tài)，提交一個(gè)mutations
            this.$store.commit('addIncrement',{  //這里是commit addIncrement
                n:5                //參數(shù)
            });
        }
        //這里是異步觸發(fā)一個(gè)action，注意和上面同步的不同之處
        this.$store.dispatch('addAction') //這里是dispatch addAction
    },
    created(){
        this.$store.dispatch('getListAction');  //dispatch
    }
    也可以這樣寫(xiě)：
    methods:{
        addHandle(){
            this.$store.commit({
                type:'addIncrement',  //改變的狀態(tài)類型
                n:5                             //參數(shù)
            })
        }
    }
</script>
//上面是同步操作數(shù)據(jù)，使用mutations，如果要異步操作數(shù)據(jù)，就用到Actions，注意，不管是同步還是異步操作，改變數(shù)據(jù)前都得先提交mutations
//向后端發(fā)送ajax請(qǐng)求就放在Actions里面。在methods里面創(chuàng)建方法，通過(guò)axios獲取數(shù)據(jù)，然后更新到store里面定義的變量，這一系列操作都在index.js文件里面完成

• 如果要對(duì)store里面的數(shù)值進(jìn)行邏輯判斷（數(shù)據(jù)過(guò)濾、數(shù)據(jù)的加減乘除），那么就用到getters，用法類似于計(jì)算屬性computed，getters可以看做是Vuex的計(jì)算屬性

• 在Store倉(cāng)庫(kù)里，state就是用來(lái)存放數(shù)據(jù)，在Vue里面若是對(duì)數(shù)據(jù)進(jìn)行處理輸出，比如數(shù)據(jù)要過(guò)濾，一般我們可以寫(xiě)到computed中。但是如果很多組件都使用這個(gè)過(guò)濾后的數(shù)據(jù)，比如餅狀圖組件和曲線圖組件，我們是否可以把這個(gè)數(shù)據(jù)抽提出來(lái)共享？這就是getters存在的意義。我們可以認(rèn)為，【getters】是store的計(jì)算屬性。因?yàn)間etters是對(duì)數(shù)據(jù)進(jìn)行邏輯運(yùn)算，而不是新添加的方法或功能，僅僅是是數(shù)據(jù)的邏輯運(yùn)算，所以要始終返回一個(gè)新值，可以先在getters下面的方法里面定義一個(gè)新值變量，經(jīng)過(guò)計(jì)算，然后return出這個(gè)新變量

• getters比較死板，如果你的百度錢包只有在金額為100才能提現(xiàn)，那么你在寫(xiě)提現(xiàn)頁(yè)面，它是早已固定好的，而Mutation不一樣，當(dāng)你點(diǎn)擊百度錢包提現(xiàn)，你哪怕是一元，它只要你點(diǎn)擊了便可以提現(xiàn)，而且getters它是不需要什么點(diǎn)擊，它就存在，只要你寫(xiě)了，這是什么意思，就是說(shuō)假設(shè)你百度錢包為0，你存在了getter它就有100元，而你如果寫(xiě)許多百度經(jīng)驗(yàn)，百度再次發(fā)紅包0.5元時(shí)它就是100+0.5+100

五、Vuex輔助函數(shù)
使用這些輔助函數(shù)，首先需要引入vuex，這些都是vuex下面的方法，使用解構(gòu)賦值

import { mapState } from 'vuex'
mapState
mapGetters
mapMutations
mapActions
改寫(xiě)上面的代碼：

Increment.vue組件
<template>
    <p>{{count}}</p>
    <span>{{filterNum}}</span>
    <input type="button" value="+" @click="add" />
    <input type="button" value="-" @click="reduce({n:11})"/>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
export default {
        data(){
        },
     computed:{
        abc(){
            return 123  //普通的計(jì)算屬性
        },
        ...mapState(['count'])  //這里的count就是store里面定義的倉(cāng)庫(kù)里面的count
        ...mapGeters(['filterNum'])  //從getters里面取值(經(jīng)過(guò)邏輯處理的值)
     },
    methods:{

        /*reduce(){  //同步觸發(fā)action
            this.$store.commit('reduceAction',{n:5})  //同步每次減5
        }*/

        ...mapMutations({  //改寫(xiě)mutations，要傳參，參數(shù)在模板里面添加reduce({n:11})
            reduce:'reduceAction'
        })

        /*add(){  //異步觸發(fā)actions
            this.$store.dispatch('addAction')
        }*/

        ...mapActions({  //改寫(xiě)actions
            add:'addAction'
        })
    }
}
</script>

index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{
        count:100
    },
    mutations:{
        addHandle(state,payload){  //payload是參數(shù)
            state.count+=payload.n;
        },
        reduceAction(state,payload){
            state.count-=payload.n
        }
    },
    actions:{
        addAction(context){
            setTimeout(()=>{
                context.commit('addHandle',{n:15})  //異步每次加15
            },1000)
        }
    },
    getters:{
        filterNum(state){
            return state.count>=102?102:state.count
        }
    }
})

export default store

六、在vue-cli里面使用Vuex
1、npm install vuex --save
2、在src目錄下面新建store文件夾，里面新建index.js
3、store/index.js代碼：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
let store = new Vuex.Store({
    state:{
        shopCarData:[]  //購(gòu)物車的數(shù)據(jù)默認(rèn)數(shù)據(jù)格式是數(shù)組，使用Vuex對(duì)這個(gè)數(shù)組進(jìn)行操作
    },
    mutations:{
        addShopCarData(state,data){
            //do something
        }
    },
    getters:{

    }
})
export default store

4、main.js代碼

import store from './store'
new Vue({
    el:'#app',
    router,
    store,
    template:'<App/>',
    components:{
        App
    }
})

七、vuex使用心得1、在state里面定義全局共用的狀態(tài)數(shù)據(jù)，state是一個(gè)對(duì)象，里面定義鍵值對(duì)，在組件頁(yè)面，獲取state狀態(tài)值，通過(guò)computed計(jì)算屬性來(lái)獲取
2、即時(shí)修改state狀態(tài)值，通過(guò)提交mutations來(lái)進(jìn)行，mutations是一個(gè)對(duì)象，里面定義各種修改state狀態(tài)值的方法，方法接收state和payload兩個(gè)參數(shù)
3、異步修改state狀態(tài)值，通過(guò)actions來(lái)獲取數(shù)據(jù)，然后也要通過(guò)提交mutations來(lái)修改state里面定義的狀態(tài)值
用的較多的是通過(guò)axios來(lái)獲取遠(yuǎn)程數(shù)據(jù)，然后在then方法里面commit一個(gè)mutations來(lái)修改state里面的原始狀態(tài)值，mutations要先定義
在created(){}里面通過(guò)this.$store.dispatch('fetchDataAction')來(lái)執(zhí)行這個(gè)actions，
定義@click方法來(lái)即時(shí)提交mutations，
br/>1、在state里面定義全局共用的狀態(tài)數(shù)據(jù)，state是一個(gè)對(duì)象，里面定義鍵值對(duì)，在組件頁(yè)面，獲取state狀態(tài)值，通過(guò)computed計(jì)算屬性來(lái)獲取
2、即時(shí)修改state狀態(tài)值，通過(guò)提交mutations來(lái)進(jìn)行，mutations是一個(gè)對(duì)象，里面定義各種修改state狀態(tài)值的方法，方法接收state和payload兩個(gè)參數(shù)
3、異步修改state狀態(tài)值，通過(guò)actions來(lái)獲取數(shù)據(jù)，然后也要通過(guò)提交mutations來(lái)修改state里面定義的狀態(tài)值
用的較多的是通過(guò)axios來(lái)獲取遠(yuǎn)程數(shù)據(jù)，然后在then方法里面commit一個(gè)mutations來(lái)修改state里面的原始狀態(tài)值，mutations要先定義
在created(){}里面通過(guò)this.$store.dispatch('fetchDataAction')來(lái)執(zhí)行這個(gè)actions，
定義@click方法來(lái)即時(shí)提交mutations，