vuex使用

Vuex 使用一个 Store 对象管理应用的状态，一个 Store 包括 State, Getter, Mutation, Action 四个属性。

State：State 意为“状态”，是 vuex 状态管理的数据源。获取数据  this.$store.state.dialog.show

Getter：Getter 的作用与 filters 有一些相似，可以将 State 进行过滤后输出。获取经过getter处理后的数据  $store.getters.not_show 

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方法
        },
    }
}
注意 : $store.getters.not_show 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

Mutation：Mutaion 是 vuex 中改变 State 的途径，并且只能是同步操作。Mutaion 使得状态变得可追踪，配合一些 devtools 可以实现 time-travel 的调试体验。借助 $store.commit('switch_dialog')方法来触发mutations 中的switch_dialog 方法

Action：一些对 State 的异步操作可以放在 Action 中，并通过在 Action 提交 Mutaion 变更状态。使用 $store.dispatch('switch_dialog') 来触发 action 中的 switch_dialog 方法。

modules 无论哪个组件都可以使用 , 那组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 

我们可以使用 vuex 的 modules 

总的来说，我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面。 

跨组件通信一般指非父子组件间的通信，父子组件的通信一般可以通过以下方式：
1、通过 prop 属性实现父组件向子组件传递数据
2、通过在子组件中触发事件实现向父组件传递数据
非父子组件之间的通信一般通过一个空的 Vue 实例作为 中转站，也可以称之为 事件中心、event bus。

总而言之，在页面数据结构比较复杂，数据和组件分离，分别处理，组件量较大的情况下，那么使用 Vuex 是非常合适的。

 参考文档：https://segmentfault.com/a/1190000009404727#comment-area