Vue配合vuex开发步骤总结

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

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

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

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

 

2、发请求（API），调用接口获取数据

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

3、vuex（actions、mutations、state三连操作）

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

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

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

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