我最近开始将事物从jQ迁移到更结构化的框架VueJS,我喜欢它!
从概念上讲,Vuex对我来说已经是一个典型的转变,但我相信我现在知道它的全部内容,完全得到它!但是存在一些小的灰色区域,主要是从实施的角度来看 .
我觉得这个设计很好,但不知道它是否与单向数据流的Vuex _862093相矛盾 .
基本上,从动作中返回promise(类似)对象是否被认为是一种好习惯?我将它们视为异步包装器,具有失败状态等,因此似乎非常适合返回一个承诺 . 相反,mutators只是改变了一些东西,而且是商店/模块中的纯粹结构 .
3 回答
Vuex中的
actions
是异步的 . 让调用函数(操作的发起者)知道某个操作已完成的唯一方法是返回一个Promise并稍后解析它 .下面是一个示例:
myAction
返回Promise
,进行http调用并稍后解析或拒绝Promise
- 所有异步现在,当您的Vue组件启动
myAction
时,它将获取此Promise对象并可以知道它是否成功 . 以下是Vue组件的一些示例代码:如您所见,
actions
返回Promise
非常有用 . 否则,动作发起者无法知道发生了什么以及何时足够稳定以在用户界面上显示某些内容 .关于
mutators
的最后一个注释 - 正如你正确指出的那样,它们是同步的 . 它们改变了state
中的内容,通常从actions
调用 . 没有必要将Promises
与mutators
混合,因为actions
处理该部分 .Edit: My views on the Vuex cycle of uni-directional data flow:
如果在组件中访问类似
this.$store.state["your data key"]
的数据,则数据流是单向的 .行动的承诺只是让组件知道行动是完整的 .
该组件可以从上面示例中的promise promise函数中获取数据(不是单向的,因此不推荐),也可以直接来自
$store.state["your data key"]
,它是单向的并遵循vuex数据生命周期 .一旦在您的操作中完成http调用,上面的段落假定您的mutator使用
Vue.set(state, "your data key", http_data)
.仅供参考有关封闭主题的信息: you don’t have to create a promise, axios returns one itself:
参考:https://forum.vuejs.org/t/how-to-resolve-a-promise-object-in-a-vuex-action-and-redirect-to-another-route/18254/4
例:
Actions
Component