vuex的个人理解

看官方文档看的一脸懵逼，后来看到了一篇比较容易理解的博文，大概写下自己的理解

一、vuex是什么

是基于vue的状态管理模式，一般用于解决大型项目中子组件向父组件传递数据的问题

二、基本概念

1、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
    }
})

2、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})

3、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访问它

4、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')触发事件

5、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中的状态不可以直接进行修改，只能获取它的值

6、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 中。

三、安装和使用方法

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