浅谈vue项目进阶开发-vuex篇

Posted 2023-03-13

参考技术A 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=‘小明‘，这么做会报错。