今天我們簡單說一下vuex的使用，vuex是什么呢，相當於react的redux，如果項目使用數據過多的話，直接管理是非常不方便的，那么采用vuex，那些繁瑣的問題就迎刃而解了，首先我們先看看官方對vuex的說明：
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
說白了就是vue的狀態管理，你只需要每次動態的改變這些狀態就行，數據就會自動渲染，從第一步安裝開始，
1、安裝vue項目：
(1).vue init webpack Testporject
(2).cd Testporject
(3).npm i vuex --save
(4) npm run dev
這些指令就不用說了，作為一個vue開發者，如果不知道的話那就可以不用學了，前提是你需要依賴vue-cli，如果安裝失敗，那請先安裝vue-cli 吧
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對象
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的函數呢，方法就是
//heade組件
<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，放棄吧！
demo地址：https://github.com/Ningstyle/VuexTest
vuex中文官網：https://vuex.vuejs.org/zh-cn/
以上教程全部原創，手打，難免有錯誤的地方，請各位指正！
如果想一起學習，加入我們的前端交流群：565996731（注明：博客園）
一只熊的北極 2018-01-23