Шаблон репозитория с vuex и firestore: правильный способ синхронизировать хранилище vuex c с обновлениями firestore в реальном времени

Question

Мои файлы компонентов внезапно стали слишком большими, поэтому я думаю об использовании шаблона репозитория, чтобы изолировать мой код, связанный с хранилищем огня. Я также хотел бы, чтобы мой vuex store синхронизировался c с данными firestore, используя возможности обновления firestore в реальном времени.

Итак, я планирую, чтобы мои компоненты вызывали действия vuex, а действия вызывали репозитории.

В репозиториях я настрою прослушиватель базы данных при загрузке веб-приложения, и каждый раз, когда он запускается, он будет отправлять действие vuex для обновления хранилища vuex, сохраняя его синхронизацию c с firestore. Затем я мог бы просто использовать хранилище из геттеров, поскольку оно всегда будет обновляться.

Подобным образом действия, подобные действию addPost, будут вызывать только функцию относительного репозитория, без необходимости фиксировать мутацию в хранилище, потому что хранилище всегда будет синхронизировано c с данными, возвращаемыми слушателем в реальном времени при его обновлении (то же самое произойдет с updatePost, removePost и т. д.). Я попадаю в какую-то антипаттерновую вещь, когда эти действия не вызывают никаких мутаций?

Другой вариант - (на мой взгляд), чтобы репозиторий вызывал непосредственно из компонентов при обновлении, добавлении, удалении вещей в дб. Чтобы получить данные в компонентах, я бы просто использовал вычисляемый получатель хранилища (всегда обновляется прослушивателем хранилища огня).

Вот простой макет того, как это будет выглядеть:

 //PostRepository.js
 import db from "firestore"
 import {
      vuexStore
  } from "@/store/index.js";

  export default {
  i will call setup when booting the application
    async setupRealtimeUpdates() {
       db.collection("posts")
        .onSnapshot(function(querySnapshot) {
          var posts= [];
          querySnapshot.forEach(function(doc) {
            posts.push(doc.data());
          });

         vuexStore.dispatch("setPosts",posts)
     });
    },
      async addPost(post) {
        db.collection("posts").add(post)  
    },
   ....
  }

--------------------------------------------------------------------------
store.js 
import Vue from 'vue';
import Vuex from 'vuex';


import PostRepository from './PostRepository';

Vue.use(Vuex)

const store = new Vuex.Store({
state: {

    posts: [],
},
mutations:{ 
   SET_POSTS(state,posts){
      state.posts=posts
    }
},

actions: {

    // the add post does not need to commit
    //because the firestore listener in the repository will take care
    //of updating the store
    async addPost: (post) =>{
       await PostRepository.add(post)
    },


    setPosts: ({commit},posts)=> {
      commit("SET_POSTS",posts)
    },
},

getters:{
 posts(state){
    return state.posts
}

}`