Add utility to map typed state

src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    <h1>{{ msg }}</h1>
+    <h1>{{ backwardsMessage }}</h1>
     <p>
       For a guide and recipes on how to configure / customize this project,<br />
       check out the
@@ -127,12 +127,18 @@
 </template>
 
 <script lang="ts">
+import { mapRootState } from "@/store";
 import Vue from "vue";
 
 export default Vue.extend({
   name: "HelloWorld",
-  props: {
-    msg: String,
+  computed: {
+    ...mapRootState(["message"]),
+    backwardsMessage(): string {
+      const chars = this.message.split("");
+      chars.reverse();
+      return chars.join("");
+    },
   },
 });
 </script>

src/store/index.ts

@@ -1,10 +1,23 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { mapTypedState } from "./util";
 
 Vue.use(Vuex);
 
+export interface RootState {
+  message: string;
+}
+
+const state: RootState = {
+  message: "olleH",
+};
+
+export function mapRootState(keys: (keyof RootState)[]) {
+  return mapTypedState<RootState>(keys);
+}
+
 export default new Vuex.Store({
-  state: {},
+  state,
   mutations: {},
   actions: {},
   modules: {},

src/store/util.ts

@@ -0,0 +1,8 @@
+import { mapState } from "vuex";
+
+export function mapTypedState<State>(keys: (string & keyof State)[]) {
+  type Key = typeof keys[number];
+  return mapState(keys) as {
+    [key in Key]: () => State[key];
+  };
+}

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <HelloWorld />
   </div>
 </template>