logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年

在 Vue 组件里使用 Store 里的动作与数据

  • 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获取更新后的内容列表数据。