VueX的详情

Vuex状态管理跟使知羡用传统全局变量的不同之处：

一般通过顷尘方法或钩子触发，例如：

随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

user.js 文件

然后我们就在组件里这么调用就可以了

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块搭乎拍名进行访问

.

state.js:

mutations.js:

actions.js:

4.使用store

在main.js中引用

1.vuex的优缺点

2..vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（ *** 作数据的指令）

处理数据， *** 作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this.$store.commit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些 *** 作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要卜衫悄传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用塌空vuex的数据太多了，然而把所有的数据处理全部放在 mutations.js文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1.js

mod2.js也是如此

那么如何调用呢？

更新数据的方法会有所变化型渣吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3.vuex的注意点

a.在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b.使用vuex我们在组件内更改数据是无效的。例如：this.$store.state.name=‘小明‘，这么做会报错。

方式导出。

所以index.js中需要先对modules进行处理，通贺肢世过require.context获取modules下所有js文件，如下

然后对getters的处理可以摘出来放到单独饥卜js里。

因为modules的处理，下面相对于普通的使用方式多禅肢了个命名空间

1 this.$store.state.命名空间.

2 import { mapState } from 'vuex'

computed:{

...mapGetters({

'getters里定义的key（其实对应的state值）'

})

}

this. store.commit('命名空间/mutations里的函数名',参数数据)

---