java更改模块状态_Vuex 状态管理

在编写应用的过程中，有的数据是全局都需要使用的，如果数据存储维护在各个组件中，那么会有一些重复的校验、计算逻辑，同时组件之间相互传递会比较麻烦，所以vuex被提出了。

vuex就是一种集中式管理状态的工具，它可以满足复杂应用中，多个组件共同管理公用状态的需求。

因为它是一个数据管理工具，所以涉及到的操作就是存和取。存数据按照是同步更改数据还是异步更改数据分为mutaion和action。取数据可以直接取state，也可以取多个state计算出来的属性。

如果应用特别复杂，vuex里面的状态可能会很多，为了便于管理，可以按照功能划分module来分开管。

1、取数据

1) 直接取数据

直接取数据使用 this.$store.state.count 就可以了。

这样指定取vuex里的某个state固然可行，但是state多了，写起来麻烦，所以vuex提供了一个辅助函数叫 mapState，可以批量取vuex里的状态，并把它们映射到this下。

computed

2) 取计算后的数据

有的数据是需要计算后产生的，比如列表总数，就需要先过滤出已完成的，然后再取数字，这些逻辑分散再各个组件分别算显然不合理，所以vuex支持计算属性。

computed

它的单个获取是this.$store.getters.doneTodos，同时，它也有批量获取的方法，叫mapGetters，用法跟mapState一样的。

2、存数据

vuex不允许组件直接修改state，只能通过vuex暴露出去的api修改。

1) 同步更改数据

同步更改数据是指vuex暴露了一个同步更改数据的方法供组件使用。这个方法的第一个参数一定是vuex自己的state，它还可以接受额外的参数。

const 

组件在调用的时候，要通过commit的方式调用：store.commit('increment', 10)。

它的批量方法是mapMutations。

2) 异步更改数据

mutation只适用于同步更改数据，里面不能有异步的请求。

action则适用于异步数据变更，同时action 提交的是 mutation，而不是直接变更状态。

const 

组件中action的触发，它也可以带参数，跟mutation一样。

store

action支持异步，所以它可以返回一个promise，能在组件里用then的写法。

action主要就复杂在，在不同的组件里提交了两次变更，因为是异步的，你不知道哪个先执行完。

它的辅助函数是mapActions。

3、分模块管理数据

如果应用够复杂，vuex里数据可能特别多，所以vuex允许按模块切分成多个模块（Module），这些vuex之间可以嵌套。

那么就产生了一些问题，这些相互嵌套的vuex，被嵌套在同一个vuex下的兄弟vuex，怎么相互访问数据呢？

1) 访问vuex全局的状态

在嵌套的vuex里，可能需要访问全局的状态，context.state可以访问本vuex里的状态，context.rootState可以访问全局vuex的状态，函数里的第三个参数可以拿到全局的状态。

const 

2) 命名空间

默认情况下，vuex的getters setter那些东西都是统一在全局命名空间下的，为了便于区分不同vuex下的不同getters，可以通过namespaced置为true的方式给vuex加一个命名空间，加了命名空间之后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

就是说加了命名空间，vuex内部只是 namespaced:true，外部调用的时候，得加模块名，

比如之前直接写getters.isAdmin，现在要加'模块名/'作为前缀才能使用。这样在调用处可以区分是哪个模块的，便于代码阅读。

const 

---

vuex就是个数据管理工具，可以存取数据，同步异步更改数据，能分模块存，不同模块之间可以交互。

Module后面从“在带命名空间的模块内访问全局内容”往后我就太没看太明白了，感觉就是几个vuex相互访问。

老实说我觉得嵌套vuex这主意挺奇怪的，应用得是有多复杂啊，组件里一块儿数据，组件里还有父组件用props给传数据，几个vuex里各自几块儿数据，vuex里还要嵌套，vuex里action还是异步的不能保证谁先谁后，越复杂的东西，越容易出问题，我觉得这种嵌套用法能避免就避免，感觉也没啥场景非要vuex嵌套。

官方文档：

https://vuex.vuejs.org/zh/guide/