Vuex简单总结
作者:神秘网友
发布时间:2020-09-09 12:56:54
Vuex简单总结
Vuex简单总结
前端小白简单总结，还望各位大佬多多指教~
之前刚开始看Vuex时候，有点晕，又仔细研究了一下，明白了，以下是个人的简单总结，仅供参考
Vuex是什么
Vuex 是一种状态管理模式，把应用中所有组件的状态都集中存储在store里，统一管理。
单向数据流：数据变化导致页面发生变化
Vuex的流程图
整个流程大致如下：
用户和vue组件发生交互触发了actions，actions传递state并提交（调用）mutations，mutations对state进行一系列逻辑处理得到新的state，因为state变化导致Vue组件页面重新渲染。
核心概念：
- state：应用的初始状态数据，是一个对象树，存储着应用中所有的状态对象
- getters：store的计算属性，获取数据
- actions: 提交或者说调用（commit）mutations的方法，store只有通过提交mutations才能发生变化
- mutations: 一系列处理逻辑
下面从事件角度大致描述一下整个过程：
首先Vue组件被点击，触发绑定的事件，通过methods方法中的mapActions方法，将actions映射到store的actions中，actions传递state给mutations，将调用提交或者说调用（commit）mutations的方法，mutations里是具体的方法，对state进行具体的操作；
下面再从数据驱动视图变化的角度来描述一下整个过程：
首先store中的state数据，通过getters获取到state中的数据，利用computed计算属性中的mapGetters方法，将数据映射到store的getters里，这样页面就拿到了数据，可以将数据展现在页面中了。