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項目，能夠試着本身總結下。這個項目必定會讓你學到不少的。