vuex的核心概念和运行机制

最新推荐文章于 2022-11-04 10:28:05 发布

chen-cc

最新推荐文章于 2022-11-04 10:28:05 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/weixin_54228045/article/details/116429736

版权

核心概念:
（1）State: 存放基本数据 ----辅助函数mapState: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

（2）getters：专门来计算state中的数据，相当于state中数据的计算属性 —辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似

（3）actions: 是专门操作异步请求的数据和业务逻辑的地方，它不能直接变更state中的状态，而是通过commit来调用mutations里的方法来改变state里的数据。 —辅助函数mapActions 将组建的methods映射为store.dispath调用

（4）mutations：提交mutions是更改Vuex中的状态的唯一方法。mutations必须是同步的，如果要异步需要使用actions。每一个mutations都有一个字符串作为第一个参数，提交载荷作为第二个参数。 —辅助函数mapMutations 将组建中的methods映射为store.commit调用。

（5）Moudles：使用单一状态树，导致应用的所有状态几种到一个很大的对象，但是，当应用变得很大时，store对象会变得臃肿不堪，为了解决以上问题，Vuex允许我们将store分割到模块（modules）。每个模块拥有自己的state、mutations、actions、grtters。

<3>当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变

运行机制:
在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中
vuex中步修改数据

通过dispatch调用actions中的方法，再通过commit提交调用mut ations中的方法，修改state数据达到修改数据目的