一、概覽
1、Vuex是什么

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了拉薩免費建站歡迎大家使用！

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

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

• 一個頁面只能有一個容器
• 狀態(tài)存儲是響應(yīng)式的
• 不能直接改變store中的狀態(tài)，唯一途徑顯示地提交mutations
• 在actions里面，也不能直接更改state里面的狀態(tài)值，必須先定義一個mutations，然后在actions里面commit這個mutations，從而來更改state的狀態(tài)值；如果要再次請求異步，那么就是dispatch一個actions
  2、State：包含所有應(yīng)用級別狀態(tài)的對象
  3、Getters：在組件內(nèi)部獲取store中狀態(tài)的函數(shù)，類似組件的計算屬性computed
  4、Mutations：唯一修改狀態(tài)的事件回調(diào)函數(shù)，默認是同步的，如果要異步就使用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:{  //對象，里面是各種更改state狀態(tài)值的函數(shù)，同步立即更改狀態(tài)
        add( state,payload ){  //參數(shù)state就是上面的state，payload是要傳遞的值
            state.count+=payload.n;
        }
    },  
    actions:{  //異步更改狀態(tài)，可以是ajax請求成功之后改變狀態(tài)，這里用定時器模擬，1秒鐘之后提交mutations改變狀態(tài)
        //異步的更改狀態(tài)是直接在index.js里面的actions里面定義action然后commit的(附帶參數(shù))，而不是在組件內(nèi)提交，注意區(qū)別，異步是在組件內(nèi)dispatch這個actions(actions里面已經(jīng)包含了mutations)，同步是在組件內(nèi)commit這個mutations(附帶參數(shù))
        //異步也可以在index.js里面直接dispatch這個actions(附帶參數(shù))，在第一個ajax里面接著請求第二個ajax
        addAction( context ){  //ajax1
            setTimeout(function(){
                context.commit('add',{n:200});  //這里用的mutations還是上面定義的add
                context.dispatch('textAction',{test:'測試'})  //觸發(fā)ajax2
            },1000)
        }
        textAction( context,obj ){  //ajax2
            console.log(obj)
        }

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

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

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

{{count}}
{{count2}}
computed:{
    count(){
        return this.$store.state.count
    },
    count2(){
        return this.$store.getters.filterCount  //被getters進一步處理過的狀態(tài)
    }
},
methods:{
    addHandle(){  //要動態(tài)的改變狀態(tài)，就需要顯示的提交一個mutations —> add
        //同步，寫法一
        this.$store.commit('add',{n:10})
        //同步，寫法二
        this.$store.commit({
            type:'add',
            n:5
        })
        //異步，寫法
        this.$store.dispatch('addAction')
    }
}

6、context是一個對象，不是state實例

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

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

//這是改寫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'  //此時渲染的是count，不是num
})
computed:{
    abc(){
        return 123
    },
    ...mapGetters({
        num2:'filterCount'  //如果key值（即要渲染到頁面的變量值）和vuex里面定義的是一樣的，那么就可以是下面那種寫法
    }),
    ...mapState(['count'])  //count:count     count是要渲染到頁面   state:{count:100}，state里面定義的狀態(tài)名也是count
}

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

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

  參數(shù)在這里傳，和普通寫法不同

四、案例

**index.js**

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

**increment組件：**



//上面是同步操作數(shù)據(jù)，使用mutations，如果要異步操作數(shù)據(jù)，就用到Actions，注意，不管是同步還是異步操作，改變數(shù)據(jù)前都得先提交mutations
//向后端發(fā)送ajax請求就放在Actions里面。在methods里面創(chuàng)建方法，通過axios獲取數(shù)據(jù)，然后更新到store里面定義的變量，這一系列操作都在index.js文件里面完成

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

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

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

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

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

Increment.vue組件



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:[]  //購物車的數(shù)據(jù)默認數(shù)據(jù)格式是數(shù)組，使用Vuex對這個數(shù)組進行操作
    },
    mutations:{
        addShopCarData(state,data){
            //do something
        }
    },
    getters:{

    }
})
export default store

4、main.js代碼

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

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

當(dāng)前標題：Vuex教程
新聞來源：http://weahome.cn/article/pjjgih.html