vuex到底是個啥

vuex總結

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

上面是官網對vuex的解釋，然而還是不能確切知道vuex是什么，下面我就來說一下我對vuex的理解以及在使用過程中的心得體會。

vuex就像一個無形的倉庫，公共的狀態我們會抽離出來放進里面。vuex的核心主要包括以下幾個部分

• state
• mutations
• getters
• actions
• modules
  state里面就是存放的我們上面所提到的狀態
  mutations就是存放如何更改狀態
  getters就是從state中派生出狀態，比如將state中的某個狀態進行過濾然后獲取新的狀態。
  actions就是mutation的加強版，它可以通過commit mutations中的方法來改變狀態，最重要的是它可以進行異步操作。
  modules顧名思義，就是當用這個容器來裝這些狀態還是顯得混亂的時候，我們就可以把容器分成幾塊，把狀態和管理規則分類來裝。這和我們創建js模塊是一個目的，讓代碼結構更清晰。

下面我們使用vuex來做一個小功能

安裝vuex
cnpm install vuex --save-dev
那么如何使用呢？
我們以一個vue項目來說明下，這個項目也是我看的第一個項目，和作者溝通好了的。我在這里只是簡單的來說一下實現的思路 算是借花獻佛吧 ，大家有興趣的可以克隆下來好好琢磨
! 賣座電影

首先我們需要在type.js中定義mutations事件類型，比如改變左側側邊欄的狀態。type.js如下

export const CHANGE_LEFTNAV_STATUS = 'CHANGE_LEFTNAV_STATUS

我們的sidebar.vue組件剛開始是看不到的，只有點擊頭部菜單的按鈕才會出現，所以一開始這個側邊組件會有一個初始狀態，我們可以這樣去寫

<div class="sidebar-container" @click='hideNav' v-show="show">

然后我們在計算屬性中這樣寫

show:function(){
	return this.$store.getters.leftNavState
}

由於我們在vue實例中注入了vuex 所以我們可以通過this.$store來訪問需要的倉庫，我們在com.js中這樣寫

    import * as types from '../types'
/**
 * App通用配置
 */
const state = {
 
    leftNavState:false
}

const actions = {
    
    //左側導航欄的開關
    changeLeftNavState({commit},status){
        commit(types.CHANGE_LEFTNAV_STATUS,status)
    }
}
const getters = {
   
    leftNavState: state => state.leftNavState
}
const mutations = {
    [types.CHANGE_LEFTNAV_STATUS](state,status){
        state.leftNavState = status
    }
}

export default {
    state,
    actions,
    getters,
    mutations
}

當訪問this.$store.getters.leftNavState我們會得到它的值state=>state.leftNavState相當於傳入state參數，返回state.leftNavState的值，由於我們在state中聲明了leftNavState：false所以this.$store.getters.leftNavState得到的值為false所以就不會看到側邊欄組件，當然當你改成true的時候就會看到了

這里需要說明一個一個完整的module 需要包括四個部分state,getters actions mutations,state來存放需要操作的狀態 gettes類似於計算屬性，改變數據有只能通過提交到mutations方式，一種是異步的，定義在actions然后提交到mutation,通過dispach來分發，另外一種是同步的直接通過commit來觸發
然后我們來實現側邊欄的點擊顯示
我們在header.vue中這樣寫

<a class="go-menu" @click="showNav"><i class="icon iconfont icon-menu"></i></a>

然后在methods中這樣寫

showNav: function () {
      return this.$store.dispatch('changeLeftNavState', true)
    }

正如上面所說異步的點擊事件定義在actions中通過dispach分發，所以this.$store.dispatch會喚醒定義在actions中的方法

    changeLeftNavState({commit},status){
        commit(types.CHANGE_LEFTNAV_STATUS,status)
    }
    //actions中的事件需要提交到mutations
    const mutations = {
    [types.CHANGE_LEFTNAV_STATUS](state,status){
        state.leftNavState = status
    }
}

這樣倉庫中的state.leftNavState的值就變成了你傳入的值true。從而我們就看到了側邊欄組件
同樣道理我們如果要點擊隱藏這個組件那么就在sidebar.vue中這樣寫

<div class="sidebar-container" @click='hideNav' v-show="show">

然后我們在methods中這樣寫

methods:{
		hideNav(){
			this.$store.dispatch('changeLeftNavState',false)
		}
	}

這樣我們就利用vuex完成了一個點擊事件類型.

具體vuex到底是如何使用的，還是需要大家自己去看文檔摸索的。任何項目都可以看做一個公式在我看來，我們不需要死機公式，我們要理解這個公式，這個公式就像一條線，能讓我們一提起來vue就知道如何快速構建和實現一個vue項目，可以試着自己總結下。這個項目一定會讓你學到很多的。