🚧 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>

site/src/components/connexion/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus"></style>

site/src/components/connexion/script.js

@@ -0,0 +1,22 @@
+import socketIoClient from 'socket.io-client'
+
+export default
+{
+    name: 'connexion',
+
+    created()
+    {
+        this.url = `${process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1571'}/projects`
+        this.socket = socketIoClient(this.url)
+
+        this.socket.on('connect', () =>
+        {
+            console.log('connected')
+        })
+
+        this.socket.on('update_projects', (data) =>
+        {
+            this.$store.commit('updateProjects', data.all)
+        })
+    }
+}

site/src/components/connexion/template.html

@@ -0,0 +1,2 @@
+<div>
+</div>

site/src/components/projects-hub/index.vue

@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus"></style>

site/src/components/projects-hub/script.js

@@ -0,0 +1,17 @@
+export default
+{
+    name: 'projects-hub',
+
+    computed:
+    {
+        projects()
+        {
+            return this.$store.state.projects
+        }
+    },
+
+    created()
+    {
+
+    }
+}

site/src/components/projects-hub/template.html

@@ -0,0 +1,5 @@
+<div>
+    <a :href="project.slug" v-for="project in projects">
+        {{ project.name }}
+    </a>
+</div>