Vue Store (#8071)

* vue: use our own store in place of vuex

* vue store: add getters, watcher and use internal vue instance

* vue store: better state getter and credits to Vuex

* vue store: $watch -> watch

* vuex store: pass store to getters and fix typos

* add comments to store, start writing tests

* fix unit tests and add missing ones

* cleanup components, add less folder, fetch tassks

* use Vuex helpers

* pin vuex version

* move semantic-ui theme to assets/less, keep website/build empty but in git

* import helpers from vuex

website/client/components/app.vue

@@ -1,34 +0,0 @@
-<template lang="pug">
-#app.ui.fluid.container
-  site-header
-  p Welcome back {{user.profile.name}}!
-  ul
-    li
-      router-link(to='/') Home
-    li
-      router-link(to='/page') Another Page
-  router-view.view
-</template>
-
-<script>
-import SiteHeader from './siteHeader';
-import { mapState } from 'vuex';
-
-export default {
-  components: {
-    SiteHeader,
-  },
-
-  computed: mapState(['user']),
-};
-</script>
-
-<style lang="less">
-@import '../assets/semantic-ui/semantic.less';
-
-// Element is rendered outside of Vue because it cannot wait for JS to be loaded
-// Placing CSS here so it benefits from pre-processing
-#loading-screen {
-  height: 100%;
-}
-</style>

website/client/components/appHeader.vue

@@ -1,14 +1,18 @@
 <template lang="pug">
-h1 {{ title }}
+#app-header
+  h1 {{title}}
+  ul
+    li
+      router-link(to='/') Home
+    li
+      router-link(to='/page') Another Page
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState } from '../store';
 
 export default {
-  computed: mapState([
-    'title',
-  ]),
+  computed: mapState(['title']),
 };
 </script>
 

website/client/components/home.vue

@@ -1,13 +1,24 @@
 <template lang="pug">
-p {{ msg }}
+div
+  p {{ msg }}
+  p Welcome back {{profileName}}!
+  p You have {{tasksCount}} tasks!
 </template>
 
 <script>
+import { mapState, mapGetters } from '../store';
+
 export default {
   data () {
     return {
       msg: 'You\'re on the Home page!',
     };
   },
+  computed: {
+    ...mapState({
+      tasksCount: (state) => state.tasks.length,
+    }),
+    ...mapGetters(['profileName']),
+  },
 };
 </script>