I'm working on Vue project and it's getting bigger, so I rewrite whole project and apply MVVM and DDD like architecture like below.
- UI layer (MVVM ViewModel=vue/Model=Vuex)
- Domain layer
- Server layer (Firebase)
but, I am wondering how to use Vuex action in architecture
In this reference 3. Use Actions to Make API Calls and Commit the Data , vuex action should responsible for api, but I think it's not the best solution because these these points.
- We have huge actions lists if we write every logic in Vuex action.
- If these logics(methods) don't have to commit any states (ex. checkCVC for checking cvc and only return true/false result), why I have to write as Vuex action.
- where to write domain logic? All in action?
So I write domain logic without actions, and commit state (if needed) inside it.
[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})
})
}
It's seems good to me, but this approach becomes unfigured in Vue component.
[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()
}
}
....
This component simply fetch talk data, and display chat list. But this component should know what getTalk method do (component should know this method commit state implicitly).
So my question is is it good to use Vuex action as domain logic, how to harmonize vuex and doamin logic.
Welcome your every opinion, thank you !