vuex使用教程

序言：今天咱們簡單說一下vuex的使用，vuex是什麼呢，至關於react的redux，若是項目使用數據過多的話，直接管理是很是不方便的，那麼採用vuex，那些繁瑣的問題就迎刃而解了，首先咱們先看看官方對vuex的說明：

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

1、說白了就是vue的狀態管理，你只須要每次動態的改變這些狀態就行，數據就會自動渲染，從第一步安裝開始
一、安裝vue項目

vue init webpack projectName

二、進入項目目錄

cd projectName

三、安裝vuex

npm i vuex --save

四、項目啓動

npm run dev/npm start

ps:若是npm安裝慢的話，建議使用淘寶鏡像:cnpm
安裝淘寶鏡像：

npm i -g cnpm --registry=https://registry.npm.taobao.org

2、vuex的引入
項目安裝成功之後，初始的文件目錄格式都是同樣的，像我這樣

而後咱們簡單的使用，在main.js中引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

記得必定要掛載使用它，就是這一句：Vue.use(Vuex)
3、在main.js中加入

var store = new vuex.Store({//store對象
    state:{    
        count:0  
    }
})

4、把剛纔的store對象實例化到Vue中

new Vue({
    el: '#app',
    router,
    store,//加入store對象
    template: '<App/>',
    components: { App }
})

完成這一步咱們就可使用了，一個簡單的vuex的state就能夠了，怎麼用呢

<div id="hello">
    <p>{{$store.state.count}}</p>
</div>

5、很明顯，剛纔只是簡單的一例子，若是你須要作大型的項目，不可能把store對象寫在main.js裏，這樣是很是不方便管理的，因此咱們須要在src下新建一個文件夾store專門存放store對象，而後咱們新建一個文件index.js

//index.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
    state:{        
        count:0    
    }
})

相應的main,js就須要作修改了

import store from './store/index' 
new Vue({  
    el: '#app',
    router,
    store,//這個store是剛纔建立的index文件引入的
    template: '<App/>',
    components: { App }
})

這樣作就是爲了把store對象分離出去，方便管理，可是你會發現這個store對象是全局的全部組件均可以使用，若是咱們的組件多了，數據多了，所有堆放在一塊兒，是否是特別臃腫，因此如今咱們就該使用modules
首頁咱們新建一個js文件存放一個組件可能用到的store對象，好比我新建heade.js,在這裏咱們不須要引用vuex了，只須要默認export default就好了
//heade.js

export default {
    state: {
        count: 0    
    }
}

而後咱們把在index.js中使用modules　

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); 
import HeadeStore from './heade';//引入剛纔的heade.js export default new vuex.Store({
    modules: {
        Heade: HeadeStore    
    }
})

如今咱們管理起來就方便多了，好比還有其餘的呢咱們放在modules下就能夠了，好比，咱們除了heade.js裏管理的是一個組件的store對象，咱們還有一個content.js來管理另一個組件的store對象，那麼咱們在store文件夾下載新建一個content.js,和heade.js同樣，只須要默認輸出就能夠了
//content.js

export default {
    state: {
        cont: '這是content內容'    
    }
}

而後咱們在index.js中引入掛在modules下就能夠啦

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); 
import HeadeStore './heade';//引入剛纔的heade.js
import ContentStore from './content' //引入content.js 
export default new vuex.Store({
    modules: {        
        Heade: HeadeStore,
        Content: ContentStore    
    }
})

這樣是否是方便多了，可是怎麼用呢，很簡單，如今須要經過modules去找他，以前的方法：$store.state.count改爲$store.state.Heade.count就好了，很明顯這是找到了heade.js下的count值，那麼找content.js下cont的值呢？同樣的，換一下modules的名就行$store.state.Content.cont

//heade組件<p>{{$store.state.Heade.count}}</p>//content組件<p>{{$store.state.Content.cont}}</p>

輸出結果分貝爲：0，這是content內容　
6、那麼接下來你以爲問題解決了嗎，難道大家的項目組件全部的狀態都用這一個，那若是我須要動態的改變他的狀態呢，怎麼辦？沒事，這不mutations來了嗎，問題就好多了,怎麼用呢，這是幹嗎的呢，說白了就是動態的改變state的值完成頁面的同步渲染，看看用法吧，直接在state對象後面加就好了

//heade.js
export default {
    state: {
        count: 0    
    },    
    mutations: {
        Count (state) {         
            state.count =1      
        }    
    }
}

解釋一下，mutations對象是函數，默認傳值是state，也就是上面的state，因此能夠直接操做state.count
怎麼用呢，很簡單，好比頁面有一個按鈕，點擊改變state的count

<a href="javascript:;" @click="$store.commit('Count ')">click</a>

此時頁面渲染爲1
commit('Count ')調用mutations的固定方法，參數爲mutations的方法名，固然commit不止傳一個參數，也能夠傳不少，好比：

<a href="javascript:;" @click="$store.commit('Count',10)">click</a>

能夠在heade.js的mutations下Count方法接收它

//heade.js
export default {
    state: {
        count: 0
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n     
        }    
    }
}

此時輸出結果爲10

到這一步爲止，咱們已經能夠正常的動態的修改state來渲染在頁面了，你會發現，mutations是同步的，只要你在一個組件執行mutations的方法了，那全部的組件只要用到mutations的方法都會同步進行改變，這並非咱們想要的結果，因此，actions來解決問題了，寫法同樣

//heade.js
export default {
    state: {
        count: 0
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n
        }    
    },    
    actions: {
        Acount (context) {
            context.commit('Count ')
        }    
    }
}

接着解釋，actions和mutations的寫法同樣，都是函數，可是actions的默認參數是context，context.commit('Count ')的意思是觸發mutations下的Count函數，那麼怎麼觸發actions的函數呢，方法就是

<a href="javascript:;" @click="$store.dispatch('Acount')">click</a>

dispatch方法是官方固定觸發actions下函數的方法
官方推薦 , 將異步操做放在 action 中

還有一個屬性我以爲也沒有必要說了，getters,解釋一下它的做用
getters 和 vue 中的 computed 相似 , 都是用來計算 state 而後生成新的數據 ( 狀態 ) 的。好比咱們heade.js的state有一個值show:false getters就是計算與false相反的，可是它計算的值是不能直接修改的， 須要對應的 state 發生變化才能修改。　

//heade.js
export default {
    state: {
        count: 0,
        show: false    
    },    
    mutations: {
        Count (state,n) {
            state.count =state.count+n      
        }    
    },    
    actions: {
        Acount (context) {
            context.commit('Count ')
        }    
    },    
    getters:{
        not_show(state){
            return !state.show;
        }    
    }
}

它也是默認接受state
最後一點就是爲了方便操做開發，通常狀況$store.state.Heade.show，$store.state.show寫起來不是很方便，那麼vuex的輔助函數mapState、mapGetters、mapActions就能夠解決這個問題，辦stroe對象那個映射到this

<template> 
    <div class="Heade">    
        <p>{{msg}}</P> 
    </div>
</template> 
<script>
import {mapState} from 'vuex';
export default {
    name: 'Heade',  
    data () {   
        return {
            msg: ''    
        }  
    },
    computed:{    //這裏的三點叫作 : 擴展運算符    
        ...mapState([
            count:state=>state.Heade.count    
        ]),  
    },  
    created () {
        this.msg = this.count  
    }
}
</script>

如今咱們就直接能夠用this.count去找到state下count的值了，created方法是頁面剛載入加載完事執行的方法，完後動態的賦值給msg，mapState通常放在computed計算屬性中，mapActions通常放在methods下，
到這一步爲止vuex的學習使用就結束了，你能夠盡情的去操做數據了，也不用擔憂會混亂，若是您連我寫的文檔都看不懂，那你不適合學習vue，放棄吧！ 哈哈哈哈

以上教程所有原創，手打，不免有錯誤的地方，請各位指正！
若是想一塊兒學習,請添加我的微信羣一塊兒學習：lining88662200
demo地址
vuex官網