Vuex (#8041)

* add vuex, cleanup client directory and create example components

* disale sample unit test

* disable import for non existing file

* correct regexp for unit tests, add simple test to avoid error, add babel-polyfill for Vuex

* add line wrongly removed, update regexp

website/client/components/App.vue

@@ -1,64 +1,30 @@
 <template lang="pug">
 #app
-  img.logo(src='../assets/logo.png')
+  site-header
   ul
     li
       router-link(to='/') Home
     li
-      router-link(to='/sub') Sub
+      router-link(to='/page') Another Page
   router-view.view
-  p Welcome to your Vue.js app!
-  p
-    | To get a better understanding of how this boilerplate works, check out
-    | <a href="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
-    | It is also recommended to go through the docs for
-    | <a href="http://webpack.github.io/" target="_blank">Webpack</a> and
-    | <a href="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
-    | If you have any issues with the setup, please file an issue at this boilerplate's
-    | <a href="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
-  p
-    | You may also want to checkout
-    | <a href="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
-    | <a href="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
 </template>
 
 <script>
-import Hello from './Hello';
+import SiteHeader from './siteHeader';
 
 export default {
   components: {
-    Hello,
+    SiteHeader,
   },
 };
 </script>
 
 <style>
-html {
-  height: 100%;
-}
-
-body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
 #app {
-  color: #2c3e50;
-  margin-top: -100px;
-  max-width: 600px;
-  font-family: Source Sans Pro, Helvetica, sans-serif;
-  text-align: center;
-}
-
-#app a {
-  color: #42b983;
-  text-decoration: none;
-}
-
-.logo {
-  width: 100px;
-  height: 100px
+  margin: 0 auto;
+  width: 80%;
+  border-left : 1px solid;
+  border-right: 1px solid;
+  padding: 20px;
 }
 </style>

website/client/components/Sub.vue

@@ -1,21 +0,0 @@
-<template lang="pug">
-.hello
-  h1 {{ msg }}
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      msg: 'Hello Sub Route!',
-    };
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1 {
-  color: #42b983;
-}
-</style>

website/client/components/app.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+#app
+  site-header
+  ul
+    li
+      router-link(to='/') Home
+    li
+      router-link(to='/page') Another Page
+  router-view.view
+</template>
+
+<script>
+import SiteHeader from './siteHeader';
+
+export default {
+  components: {
+    SiteHeader,
+  },
+};
+</script>
+
+<style>
+#app {
+  margin: 0 auto;
+  width: 80%;
+  border-left : 1px solid;
+  border-right: 1px solid;
+  padding: 20px;
+}
+</style>

website/client/components/home.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+p {{ msg }}
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'You\'re on the Home page!',
+    };
+  },
+};
+</script>

website/client/components/page.vue

@@ -0,0 +1,13 @@
+<template lang="pug">
+p {{ msg }}
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'You\'re on Another Page!',
+    };
+  },
+};
+</script>

website/client/components/siteHeader.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
-.hello
-  h1 {{ msg }}
+h1 {{ title }}
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
-  data () {
-    return {
-      msg: 'Hello Vue!',
-    };
-  },
+  computed: mapState([
+    'title',
+  ]),
 };
 </script>