Tak*_*ori 6 dns domain-driven-design mvvm vue.js vuex
我正在研究 Vue 项目并且它变得越来越大,所以我重写了整个项目并应用了 MVVM 和 DDD 之类的架构,如下所示。
但是,我想知道如何在架构中使用 Vuex 动作
在这个参考3. Use Actions to Make API Calls and Commit the Data 中,vuex action应该负责api,但我认为这不是最好的解决方案,因为这些点。
所以我在没有动作的情况下编写域逻辑,并在其中提交状态(如果需要)。
[domain/talks.ts]
export const getTalk = (uid: string, talkTo: string,) => {
const server = new Talks(uid)
server.getTalks(talkTo).subscribe(talk => {
store.commit('profile/talks/updateTalk', {to: talkTo, talk: talk})
})
}
Run Code Online (Sandbox Code Playgroud)
这对我来说似乎很好,但这种方法在 Vue 组件中变得难以理解。
[Talk.vue]
<template lang="pug">
//display chat list
ul
li.list(v-for="message in talk" :key="message.id") {{message}}
</template>
<script lang="ts">
import store from "@/model/vuex/talk.ts"
import {getTalk} from "@/domain/talk.ts"
@Component
export default class Talk extends Vue{
subscription?:Subscription
get talks(){
return store.talks
}
created():void{
this.subscription = getTalk() // <- **here commit talk state implicitly**
}
destroy():void{
this.subscription.unsubscribe()
}
}
....
Run Code Online (Sandbox Code Playgroud)
该组件简单地获取谈话数据,并显示聊天列表。但是这个组件应该知道getTalk方法做什么(组件应该隐式地知道这个方法提交状态)。
所以我的问题是使用 Vuex action 作为域逻辑好不好,如何协调 vuex 和 doamin 逻辑。
欢迎大家提出意见,谢谢!
| 归档时间: |
|
| 查看次数: |
825 次 |
| 最近记录: |