- POS页面的数据从POS list组件获取,创建组件后请求服务器接口。
- 组件循环接收的数据并将其分配给post list item组件的item属性。
- 转移内容列表数据至应用store,通过store动作获取所需数据。
- 创建一个store模块在src/post目录下,定义接口post index store state。
- Store模块包含loading属性(布尔值)和post(数组类型)。
- 定义post item接口,包含id(数值类型)、title和content(字符串类型)。
- store模块中的post属性类型设置为post item类型。
- 导出一个名为post index store module的store模块,类型为module,包含state和root state参数。
- 设置命名空间为true,定义state,包括默认值为false的loading和一个空数组的post。
- 通过getter添加获取loading和post的state。
- 使用mutations来修改state,包括set loading和set post。
- 在actions里定义get post动作,使用commit修改state。如果请求成功或失败,改变loading的值。
- 使用try-catch处理错误,通过API发送HTTP请求获取数据,成功后将数据交给post state并设置loading为false。
- 在store模块里添加post index store module并删除组件中直接请求接口的代码。
- 使用Vuex的map getters和map actions以及computed和methods在组件中处理获取到的数据。
- 显示加载中信息直到请求完成,并通过getter获取更新后的内容列表数据。