vue组件通信及vueX状态管理复习一：组件通信方式-父组件给子组件传值子组件通过props接收数据父组件给子组件通

state是管理的全局状态，把状态绑定到组件(视图)，渲染到界面展示给用户，用户可以通过比如按钮等进行交互，通过dispatch分发到Actions，不直接提交Mutations是因为Actions可以进行异步操作，异步操作完成后通过commit提交到Mutations进行更改，Mutations是同步的，所有状态的修改是通过Mutations，通过Mutations的目的是可以追踪状态的所有变化
Store是一个容器，包含着应用中的大部分状态，我们不能直接改变Store中的状态，需要提交MUtations中进行改变
State是一个状态保存在Store中
Getter就像是vue中的计算属性，内部可以对计算的结果进行缓存，只有当依赖的状态发生改变的时候才会重新去计算
Mutation状态的变化必须提交Mutations来完成
Action和MUtations类似，不同的是Actions可以进行异步操作,内部改变状态的时候都需要提交Mutations
Module模块，可以将Store分割为模块，每个模块拥有自己的Store,State,Getter,Mutation,Action

创建store.js文件，安装Vuex
导入Vue import Vue from 'vue'
导入Vuex import Vuex from 'vuex'
使用Vue.use注册组件 Vue.use(Vuex)
导出 new Vuex.Store
在app.js中导入 import store from './store'
在创建Vue示例对象的时候传入

export default new Vuex.Strore({ state: {}, mutations: {}, actions: {}, modules: {} })

state是单一状态树，里面集中存储使用的状态数据，并且state是响应式的，我们获取数据的时候可以直接在state获取
$store.state.count 可以获取state的count数据
$store.state.msg 可以获取state的msg数据
当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按键几次，manState 函数返回的是一个对象。我们需要使用一个函数将多个对象合并为一个，已使我们可以将最终对象传给 computed 属性
{{ count }} 使用mapState可以直接获取
{{ msg }} 使用mapState可以直接获取
使用对象方式重新命名
{{ num }} 使用mapState可以直接获取
{{ message }} 使用mapState可以直接获取

Vuex的getter类似于vue中的计算属性
Vuex 允许我们在 Store 中定义getter（可以认为是 store 的计算属性）。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
没有使用mapGetter {{ $store.getters.reverseMsg }}
使用mapGetter {{ reverseMsg }}

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就可能变得相当臃肿。
为了解决以上问题，Vuex允许我们将 store 分割成模块（module）。每个模块拥有自己的state,mutations,actions,getter,甚至是嵌套子模块——从上至下进行同样方式的分割
使用模块后怎么使用状态,a是模块名称,products是模块中state的属性
获取 $store.state.a.products
提交 $store.commit

命名空间

默认情况下，模块内部的 action, mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应
如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，他的所有 getter,action 及 mutation都会自动根据模块注册的路径调整命名
使用命名空间后使用map方法，第一个参数需要增加模块名称
...mapState('模块名称'，和原来参数一样是对象或者数组)