vuex理论与工程实践后的心得总结

vuex理论与工程实践后的心得总结

一、前言

    对任何一门技术的研究，都要知其原理，同时洞察原理背后解决我们什么样的场景痛点，所以研究任何技术的套路都是：这个是什么？能做什么？如何做？（好3W原则：who,what,how),这样才能真正精通。

二、vuex使用后的体会：

1. 为什么需要vuex:vuex是为了解决各个组件（兄弟，还是父子）之间数据的通讯（或者叫state的共享）而出现的，简单的程序可以用父子或者兄弟组件之间state的通讯就能解决，但有时候一份数据需要被不同的组件共享，这时候如果有一个共享的全局变量就好了，而vuex的state就是全局变量，严格定义是带了响应式的全局变量（即全局状态）。
2. state的划分：全局state（root根节点下的）、module state（要通过命名空间来访问）、组件 state(在组件本身的局部状态）。
3. vuex 工作原理中有四个元素理解：state,getters,mutation,action。vuex本质：调用state中数据去渲染组件view,或者接收组件的指令去完成对state数据的改变。state,getters都是定义是读state数据，所以在组件的computed中定义映射或者引入使用；mutation和action都是为了改变state中的值，只是它缺省第一个参数就是state(即改变前的state数据），然后返回的改变后的state,这样就实现了不直接改变state，其实mutation,action就是一套智能算法（计算变更前state和当前去改变的state两者之间哪些需要变化），mutation和action通常是前者用来定义同步，后者定义异步，他们的共同点是都只能只有2个参数，mutation接收第一个参数缺省为state(即写不写，它都是第一个参数），第二个可选payload。action的第一个参数是context（而context对象有{state,commit,rootstate,getters,rootgetterst等内容}，第二个是payload。
4. module的理解：必须用它，省得所有的状态都在root节点下，没有模块化的程序基本上没有办法团队合作，即把state分为module进行管理，最终在根节点下进行声明注入。
5. module 命名空间理解：由于module中的state,getters,mutation,action,除state外，其它三个缺省情况下都是全局的，这样容易与其它module中的重名，所以必须加上命名空间的限制，当然访问时，必须通过命名空间才能访问。
6. 组件如何读取或者写入vuex中的state(不管是全局的state，还是module中的state)，这主要把vuex的state,getters,mutation,action这四人分别要映射到组件的computed(state和getters)和methods（mutation和action)中，想本组件this一样使用他们，映射声明的方法可能有四，五种，哪一种都行，看应用情景要求和自己的编程习惯，不要太绝对，灵活使用就行。
7. modules中的action尽量定义异步操作，及所有与后台api的打交道均在这里进行调用。