🚧 Site > Add Vue store

site/src/components/application/script.js

@@ -1,32 +1,33 @@
-import socketIoClient from 'socket.io-client'
+import Connexion from '@/components/connexion'
+import ProjectsHub from '@/components/projects-hub'
 
 export default
 {
     name: 'application',
 
+    components:
+    {
+        Connexion,
+        ProjectsHub
+    },
+
     data()
     {
         return {
-            counter: 0,
-            projects: { type: Object, value: {} }
+            counter: 0
+        }
+    },
+
+    computed:
+    {
+        projects()
+        {
+            return this.$store.state.projects
         }
     },
 
     mounted()
     {
-        const socketUrl = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/projects`
-        const socket = socketIoClient(socketUrl)
-
-        socket.on('connect', () =>
-        {
-            console.log('connected')
-        })
-
-        socket.on('update_projects', (data) =>
-        {
-            this.projects = data.all
-        })
-
         window.setInterval(() =>
         {
             this.counter++

site/src/components/application/style.styl

@@ -1,2 +0,0 @@
-#application
-    background #f0f

site/src/components/application/template.html

@@ -1,6 +1,5 @@
 <div id="application">
     {{ counter }}
-    <div v-for="project in projects">
-        {{ project.name }}
-    </div>
+    <connexion></connexion>
+    <projects-hub></projects-hub>
 </div>