🚧 Site > Add Vue store

package-lock.json

@@ -7507,6 +7507,11 @@
       "integrity": "sha512-j3TBDtjqz7pC9XUzeSeqF5oekqPahxyUHsdG+kZKDH/V/DTexq5inYdLGstnqCUljoLC9LTj3H/5hmyToeSd1A==",
       "dev": true
     },
+    "vuex": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-2.3.1.tgz",
+      "integrity": "sha1-zejpl8H5lXcZvH3qFU+appHZgaY="
+    },
     "watchpack": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",

package.json

@@ -38,8 +38,9 @@
     "slug": "^0.9.1",
     "socket.io": "^2.0.3",
     "socket.io-client": "^2.0.3",
-    "yargs": "^8.0.2",
+    "vue": "^2.3.3",
-    "vue": "^2.3.3"
+    "vuex": "^2.3.1",
+    "yargs": "^8.0.2"
   },
   "devDependencies": {
     "babel-core": "^6.22.1",

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,
+            counter: 0
-            projects: { type: Object, value: {} }
+        }
+    },
+
+    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">
+    <connexion></connexion>
-        {{ project.name }}
+    <projects-hub></projects-hub>
-    </div>
 </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>

site/src/main.js

@@ -2,12 +2,14 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from '@/components/application/'
+import store from '@/store.js'
 
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
 new Vue({
     el: '#app',
+    store,
     template: '<App/>',
     components: { App }
 })

site/src/store.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+    state:
+    {
+        projects: [],
+        currentProject: null
+    },
+
+    mutations:
+    {
+        updateProjects(state, data)
+        {
+            for(const key in data)
+            {
+                const project = data[key]
+                state.projects.push(project)
+            }
+        },
+
+        addProject(state, data)
+        {
+            state.projects.push(data)
+        },
+
+        removeProject(state, data)
+        {
+            console.log(data)
+        }
+    }
+})