vuex使用心得分享（填坑）

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

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

說白了就是vue的狀態管理，你只須要每次動態的改變這些狀態就行，數據就會自動渲染，從第一步安裝開始，
一、安裝vue項目： 
      (1).vue init webpack Testporject
      (2).cd Testporject
      (3).npm i vuex --save
      (4) npm run dev
這些指令就不用說了，做爲一個vue開發者，若是不知道的話那就能夠不用學了，前提是你須要依賴vue-cli，若是安裝失敗，那請先安裝vue-cli 吧

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

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

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

記得必定要掛載使用它，就是這一句：Vue.use(Vuex)　　

三、在main.js中加入

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

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

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

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

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

五、很明顯，剛纔只是簡單的一例子，若是你須要作大型的項目，不可能把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內容　　

六、那麼接下來你以爲問題解決了嗎，難道大家的項目組件全部的狀態都用這一個，那若是我須要動態的改變他的狀態呢，怎麼辦？沒事，這不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