Vue配合vuex开发步骤总结

开发一个前端模块可以概括为以下几个步骤:

1、写静态页面,拆分静态组件

先实现静态页面,再展示动态数据。首先我们要分析页面结构,将复杂的页面拆分成一个个组件去实现

比如下面的例子,我们可以把商城首页大体拆分成5个组件


 

2、发请求(API),调用接口获取数据

页面准备好了,就可以开始准备数据了,即调用接口获取数据

3、vuex(actions、mutations、state三连操作)

4、组件获取vuex仓库数据,动态展示

在计算属性computed中利用...mapState可以拿到state中的数据

顺便说一句,mapState前面的三个点是扩展运算符,用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中,以使我们可以将最终对象传给 computed 属性。

拿到数据之后再动态展示,即更新HTML页面标签数据

猜你喜欢

转载自blog.csdn.net/laya1211/article/details/126719453