Разбивая мои розетки и делая его более организованным - PullRequest
Новая
       9

Разбивая мои розетки и делая его более организованным

0 голосов
/ 07 ноября 2019

Поэтому я пытаюсь создать базовый шаблон для стека программирования: MEVN (MongoDB, Express, NodeJS, Vue / Nuxt, SocketIO). Все в значительной степени настроено так, как я хочу, но теперь все сводится к тому, чтобы сделать его аккуратным и чистым. У меня пердит мозг, когда дело доходит до того, как я хочу модульно мой socket.on. Вот мой текущий index.vue, который настраивает остальную часть моего приложения: 

<template>
  <div>
    <!-- <loader v-if="loading"></loader> --> 
    <nuxt />
  </div>
</template>
<script>
import socket from '~/plugins/socket.io.js'
import Loader from '~/components/init/Loader'

export default {
  components: {
    Loader
  },
  data() {
    return {
      loading: true
    }
  },
  created(){
    Promise.all([
      this.$store.dispatch('todos/INIT'),
    ]).then(() => {
      setInterval(() => {
        this.loading = false
      }, 1000);
    });  

    socket.on('new-item', (data) => {
      this.$store.dispatch('todos/ADD', data.item)
    })
    socket.on('check-item', (data) => {
      this.$store.dispatch('todos/CHECK', data.item)
    })
    socket.on('removed-item', (data) => {
      this.$store.dispatch('todos/REMOVE', data.item)
    })

  }
}
</script>
<style>
  html, body {overflow-x: hidden;}
</style>

Очевидно, что по мере роста приложения становится трудно управлять socket.on на странице индекса. Я попытался поместить его в socket.js промежуточное ПО, но это не сработало так, как я хотел, так как он запускался только при начальной загрузке страницы, а не постоянно в фоновом режиме. 

import socket from '~/plugins/socket.io.js'

export default function(){
  socket.on('new-item', (data) => {
    console.log('test')
    this.$store.dispatch('todos/ADD', data.item)
  })
  socket.on('check-item', (data) => {
    this.$store.dispatch('todos/CHECK', data.item)
  })
  socket.on('removed-item', (data) => {
    this.$store.dispatch('todos/REMOVE', data.item)
  }) 
}

это очевидноне работает, но я просто не могу придумать аккуратный способ разделения моего сокета. Затем он вызывает их всех на главной странице.

...