vuex的理解与使用

一，vuex是干什么的？

vuex是用来管理各个组件公用的状态（数据）,一般用于非父子组件的传值

二，vuex的工作流程：

 图文理解：

当我们想改变vuex中state里面的数据，首先通过this.$store.dispatch方法触发action里面的函数，而该函数中第一个参数是对象，这个对象里面有个commit方法，通过this.$store.commit方法去触发mutations里面的函数，而该函数第一个参数是state，继而实现数据的修改

三，五个属性的使用

state：存放各个组件需要使用到的公共状态  在组件中通过this.$store.stata.属性进行获取值

action属性：

通过this.$store.dispatch（参数一，参数二）去触发该属性下函数方法，第一个参数为对象，该对象中有个commit方法。第二个为组件传过来的值

 

 mutations属性：

通过action下函数的第一个参数中commit方法去触发该属性中的函数 。commit方法中有两个参数，第一个参数为mutations属性下函数方法名，第二个为传递过来的值

 

 就这样完成了修改

注：并不是所有更改数据都要经过这样流程的，当没有异步操作或业务逻辑的时候，可以不用经过dispatch属性，直接通过mutation修改

getters属性

相当于computed功能，监听state中属性的变化 ，在组建中年通过this.$store.getters.属性获取值

 

modules属性

当项目多人开发的时候，为了避免代码冲突，多人操作一个文件。通常采取多个store仓库管理自己模块的状态数据。例如moveStore（电影模块）bookStore（书籍模块）

注意 为防止主仓库和子模块仓库中方法重名，扰乱了作用域，我们在子模块仓库应加上namespaced:true。同时在组件中获取其他四个属性的数据，应是通过this.模块store.state进行获取，如this.$moveStore.state，this.$moveStore.getter等等