More reliable strategy for getting deepmost component + addition of refresh() method + example & documentation on asynchronous updates

examples/vuex-async/views/Home.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h3>This is the homepage</h3>
+    <h4>There are <u>{{ postsCount }}</u> published posts</h4>
+    <ul>
+      <li v-for="post in posts">
+        <router-link :to="'posts/' + post.slug">{{ post.title }}</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'home',
+    computed: mapGetters({
+      posts: 'publishedPosts',
+      postsCount: 'publishedPostsCount'
+    }),
+    metaInfo: {
+      title: 'Home'
+    }
+  }
+</script>

examples/vuex-async/views/Post.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <template v-if="isLoading">
+      <h3>Loading...</h3>
+    </template>
+    <template v-else>
+      <h3>{{ post.title }}</h3>
+      <p>{{ post.content}}<p>
+      <router-link to="/">Go back home</router-link>
+    </template>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'post',
+    beforeMount () {
+      const { slug } = this.$route.params
+      // since fetching a post is asynchronous,
+      // we need to call `this.$meta().refresh()`
+      // to update the meta info
+      this.$store.dispatch('getPost', { slug })
+        .then(() => this.$meta().refresh())
+    },
+    computed: mapGetters([
+      'isLoading',
+      'post'
+    ]),
+    metaInfo: {
+      title () {
+        return this.isLoading ? 'Loading...' : this.post.title
+      }
+    }
+  }
+</script>