vuex的使用和理解

vuex工作流程图：vuex旨在用于没有任何关系的组件之间共享数据或传值。

这图的执行顺序是这样的：

组件(Vue Component)通过Dispatch触发Actions里面的动作；

Actions通过Commit提交Mutations

Mutations注册事件，通过这些事件来改变State的状态

最后State状态改变完后渲染到另一个子组件上

在执行之前，首先要搭建框架，创建store文件夹，子文件有index.js,actions.js和mutation.js, index.js作为入口，分别import（引入）actions.js和mutation.js，并定义一个state,用于存储组件之间共享的数据。最后，index.js需要引入到根入口main.js中去。
我们知道vuex的作用就是组件之间共享数据，那么，调用派发方法dispatch(‘方法名’，‘值’)的组件就是要向其他组件传递数据的起始组件，最后渲染的组件就是接收这个共享数据的组件。例如在登录页面的用户名username,最后要渲染到NavHeader组件当中去，就要把login中获取的username保存到vuex中去，在NavHeader组件通过$store.state.username来获取。
注意的一点，负责派发的组件中diapatch(‘方法名’，‘参数’）与action.js中context.commit(‘方法名’，‘参数’)，这两个参数不必保持一致，方法名保持一致即可。

什么是vuex？

官方的解释： Vuex是一个专为Vue.js应用程序开发的状态管理模式

当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。常用的登录，购物车等一下数据的存储

State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去

Getters：通过Getters可以派生出一些新的状态

Mutations：更改Vuex的store中的状态的唯一方法时提交mutation

Actions：Action提交的是mutation，而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

操作步骤： 当组件中的状态发生改变，通过dispatch函数提交到Action，Actions再通过Commit函数提交到Mutations, 此时，状态发生改变都会实时的去渲染组件。