Vuex的实现原理及使用详细注解

问题1：在我们开发Vue项目中会涉及到一些状态数据的管理，每个组件中都有不同的状态数据，这个时候就会涉及到组件间的通信的问题：

解决方法：

1. props（父子之间通信）
2. PubSub（任意组件之间通信）
3. 自定义事件（主要还是父子之间通信）
4. 事件总线（任意组件之间通信）
5. 插槽（目前的话也是父子之间通信）
6. Vuex（任意组件之间通信）

---

问题2：Vuex实现原理以及使用详细注解（如下图所示）

原理详解：（步骤对应上图）

1. Vuex中的state,mutations,actions,getters它们都是对象
   - state:包含了多个状态数据
   - mutations:包含了多个可以间接修改状态数据的方法
   - actions:包含了多个可以间接修改状态数据方法的对象
   - getters:包含了多个状态数据的计算属性的get操作的方法的对象
2. 这个时候就会涉及到在我们这个组件Vue Component 的内部如果想要获取Vuex当中管理的状态数据的值
   - 从state当中直接获取，拿状态数据有这么俩种方式可以获取：
   • 1-通过$store.state.xxx（xxx代表的就是属性)
   • 2-mapState（[‘xxx’])xxx也是代表属性
3. 如果我们要从组件Vue Component 的内部去修改Vuex当中管理的状态数据的值
   • 我们可以通过组件内部去找actions，让actions去找mutations，再通过mutations去修改状态数据state这么一个过程
4. 如果组件Vue Component 的内部想要找到对应的actions或者说想要找actions中对应的action
   • 1-可以通过$store.dispatch(‘xxx’)这个xxx对应的是方法名字
   • 2-可以通过map.Acitons([‘xxx’])xxx同上
     注意：
   • 如果组件Vue Component内部的方法名字和actions的方法名字重名了map.Acitons([xxx])直接写xxx就行了。
   • 如果不重名俩个名字不一样，这个时候我们可以在actions中map.Acitons([ ])中可以写对象，键和值的关系
5. actions如果要去找到mutations中对应的mutation，要想修改这个状态数据
   -在action内部用commit（‘xxx’)这里的xxx对应的是mutation中对应的方法名字
6. mutations如果想要直接修改state，简单粗暴，直接向state中传state就可以了
7. 如果我想在组件内部去找到状态数据的计算属性的值，这个时候我们可以通过另外的俩种方式
   • $.store.getters.xxx
   • mapGetters([‘xxx’])
     通过这俩种方式我们可以直接得到getters中对应的属性值（get操作的值）
8. 如果我们想要修改state这个状态数据，但是不想通过actions这种方法，那么我也可以直接去找到mutations方法如下
   • $store.commit(‘xxx’)这里的xxx是mutation当中对应的方法名
   • mapMutations([‘xxx’])这里需要注意的是，同名写成对象键值对的形式，不同名就写成数组
9. 在整个vuex中如果想要实时的检测或者看到用户做的操作到底是提交到了哪一个mutation这个state里面当前的数据是什么
   • 这个时候我们可以通过浏览器当中的一个插件Vue dev Tools
10. 一般情况下mutations中放的是同步的操作的方法
11. 出现异步操作的话，我们会把其放在actions中，其实异步或者同步都可以放
12. 如果我们想要在组件内部或者说通过vuex和后台进行交互的话，这个时候我们用的是ajax的方式

总结：

• 如果说我界面要想发生变化，那么一般情况下我们更改的是state状态数据的值
• 如果说我们想更改状态数据界面发生变化，使用了vuex，我们肯定是从Vue Component------找—>actions----action再去找-----mutations----mutations再去找----->(对应的state),最终界面发生了变化