vuex的我的理解

看官方文檔看的一臉懵逼，後來看到了一篇比較容易理解的博文，大概寫下本身的理解

1、vuex是什麼

是基於vue的狀態管理模式，通常用於解決大型項目中子組件向父組件傳遞數據的問題

2、基本概念

一、state

須要使用store的數據存儲在state裏，而且在組件裏經過this.$store.state.xxx訪問

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

export default new vuex.Store({
    state:{
        show:false
    }
})

二、mutations

$store.state.xxx一次只能操做一個state中的數據，若是須要同時操做state中多個數據，就須要使用mutations。

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//這裏的state對應着上面這個state
            state.show = state.show?false:true;
            //你還能夠在這裏執行其餘的操做改變state
        }
    }
}

在組件裏，能夠經過this.$store.commit('switch_dialog')觸發這個事件。官方文檔註明，在mutations中的操做必須是同步的，同時mutations是不區分組件的，若是在別的module中存在同名的函數，commit以後會一塊兒觸發。

$store.commit()是能夠額外傳入參數的，提交事件時能夠直接傳入，也能夠選擇對象風格

state:{
   show: false }, mutations:{ switch_dialog(state, n){//載荷 state.show = n } }
//傳參的時候能夠 this.$store.commit('switch_dialog',true)
//也能夠選擇對象風格 this.$store.commit({ type: 'switch_dialog' , n: true})

三、module

若是想區分不一樣組件的state，可使用module

import Vue from 'vue'
import vuex from 'vuex'
import dialog_store from 'dialog_store.js' //引入對應組件的js文件
Vue.use(vuex);

export default new vuex.Store({
    modules: {
        dialog: dialog_store  //上面引入的模塊
    }
})

這樣就能夠在對應組件的js文件裏管理對應的狀態了(dialog_store.js)

export default {
    state:{
        show:false
    }
}

在組件中能夠經過this.$store.state.dialog.show訪問它

四、action

多個state操做須要經過mutations，那麼若是是多個mutations的操做就須要經過action了，另外官方推薦異步操做要放在action裏。

export default {
    state:{//state
        show:false
    },
    mutations:{
        switch_dialog(state){//這裏的state對應着上面這個state
            state.show = state.show?false:true;
            //你還能夠在這裏執行其餘的操做改變state
        }
    },
    actions:{
        switch_dialog(context){//這裏的context和咱們使用的$store擁有相同的對象和方法
            context.commit('switch_dialog');
            //你還能夠在這裏觸發其餘的mutations方法
        },
    }
}

在組件裏能夠經過this.$store.dispatch('switch_dialog')觸發事件

五、getters

vuex的getters能夠看做是vue中的computed，若是須要對state中某個屬性進行額外的運算，能夠在getters中進行定義

export default {
    state:{//state
        show:false
    },
    getters:{
        not_show(state){//這裏的state對應着上面這個state
            return !state.show;
        }
    },
    mutations:{
        switch_dialog(state){//這裏的state對應着上面這個state
            state.show = state.show?false:true;
            //你還能夠在這裏執行其餘的操做改變state
        }
    },
    actions:{
        switch_dialog(context){//這裏的context和咱們使用的$store擁有相同的對象和方法
            context.commit('switch_dialog');
            //你還能夠在這裏觸發其餘的mutations方法
        },
    }
}

在組件中，咱們能夠經過this.$store.getters.not_show得到這個狀態，getters中的狀態不能夠直接進行修改，只能獲取它的值

六、mapState、mapAction、mapGetters

若是你以爲上面獲取狀態的寫法this.$store.state.xxx過於麻煩，畢竟咱們平時獲取一個數據只須要寫this.xxx，能夠選擇使用mapState、mapAction、mapGetters，下面引自上面提到的那篇博文

以mapState爲例

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
  computed:{
    ...mapState({
      show:state=>state.dialog.show
    }),
  }
}
</script>

至關於

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
  computed:{
    show(){
        return this.$store.state.dialog.show;
    }
  }
}
</script>

mapGetters、mapActions 和 mapState 相似 ，mapGetters 通常也寫在computed中 , mapActions 通常寫在 methods 中。

3、安裝和使用方法

安裝 vuex ：

npm install vuex --save

而後爲了方便管理，能夠在src/下建立一個store文件夾，建立一個index.js, :

import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({
    state:{
        show:false
    }
})

再而後 , 在實例化 Vue對象時加入 store 對象 :

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

完成到這一步 , 上述例子中的 $store.state.show 就可使用了。