vuex的信息交流

首先vuex是一个状态管理器，当我们的项目比较大时，组件之间的信息传递会显得特别混乱，这是我们就可以用vuex来管理我们的状态，vuex有自己的信息交流规则。
vuex分为以下几个部分：

•state

•mutations

•getters

•actions

•modules

其中所有的文件都在store文件夹下，store文件夹是vuex的核心。

state 里面存放所有的状态，也就是我们会用到的所有会改变的变量名的初始值。
mutations 里面存放一些方法，如何更改状态的规则

getter 就是从state中派生出来的方法，如果我们需要state中的一下特定的值，可以在getters中写入方法，获取到我们想要获取到的特定的一些值（比如要长度大于10的字符串）

actions是mutations的加强版，他的使用是依赖于mutations的，通过commit mutations中的方法来改变状态，可以异步操作。

modules 模块化 可以将getters、mutations等文件独立出来，最后在index.js文件中引入。

接下来是一个例子，之前的直播间项目的一些代码片段

我们把各个组件中的所有状态都写在了store文件夹下的index.js文件的state中：

state:{
    isLogin: [],
    //用户信息
    userInfo:{}
    ...
    }

如果我们想改变state中的用户信息，我们肯定要有途径解决这个问题，vuex规定我们需要在mutations里面定义方法来执行这件事，并且要传入两个参数，第一个是state，第二个是组件传回的值：

mutations:{
    setLogin ( state , payload) {
    state.isLogin = payload; 
    //用户信息
    [type.USER_INFO] ( state , info){
    state.userinfo = info;
    ...
    }

某个时间，我们需要获取到state中的一些特定的经过处理的数据，可以用到getters：

getters : {
    trueLogin(state) {
        return state.isLOgin.value() > 7;
        }

这样我们就获取到了state中的isLogin大于7的值。

如果我们想在事件发生3秒后改变用户的信息，那么就要用到actions，因为actions可以处理异步操作：

actions:{
    userIngoChange({commit}, data){
        setTimeout(function(){
            commit("[type.USER_INFO]",data);
            },3000);
        }
    },

mudules：模块出来，这个直播间项目的store目录是这样的

然后在indecx.js文件中是这样需要引入，与vue的模块引入方式相同：

在子文件中：export default

在index中：import getters from './getters';

在index.js中我们需要这样做，才能使用vuex：

import Vue from 'vue';
import Vuex from 'vuex';//引入vuex文件
import actions from './actions';
import getters from './getters';
import mutations from './mutations';

//告诉vue使用vuex
Vue.use(Vuex);

//注册全局组件
export default new Vuex.Store({
    state:{..},
    actions,
    getters,
    mutations,
});

接下来要在入口文件，一般是src文件夹下的index.js文件引入并注册：

import Vue from 'vue';
import { mapActions, mapGetters, mapMutations } from 'vuex';
import store from './store';

new Vue({
  el: '#app',
  store,
  ...
  })

这基本上就是一个项目中vuex的使用方法以及信息的交流了。