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 就可使用了。