From c810b712071ff53793fbf902b2df8744aaf0b0fd Mon Sep 17 00:00:00 2001
From: Cefn Hoile <github.com@cefn.com>
Date: Sat, 29 Jan 2022 22:15:34 +0000
Subject: [PATCH 1/2] Bind message to the store through a computed method (#1)

---
 src/components/HelloWorld.vue |  9 ++++++++-
 src/store/index.ts            | 10 +++++++++-
 src/views/Home.vue            |  2 +-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 8a1fae7..e14ddde 100644
--- a/src/components/HelloWorld.vue
+++ b/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
@@ -134,6 +134,13 @@ export default Vue.extend({
   props: {
     msg: String,
   },
+  computed: {
+    backwardsMessage(): string {
+      const chars = this.$store.state.message.split("");
+      chars.reverse();
+      return chars.join("");
+    },
+  },
 });
 </script>
 
diff --git a/src/store/index.ts b/src/store/index.ts
index ba2f84a..036b337 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,8 +3,16 @@ import Vuex from "vuex";
 
 Vue.use(Vuex);
 
+interface RootState {
+  message: string;
+}
+
+const state: RootState = {
+  message: "olleH",
+};
+
 export default new Vuex.Store({
-  state: {},
+  state,
   mutations: {},
   actions: {},
   modules: {},
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 04c97dd..d4e435a 100644
--- a/src/views/Home.vue
+++ b/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>
 

From 9b81e4b743b412fe02d8909dcc00d211abe36d0e Mon Sep 17 00:00:00 2001
From: Cefn Hoile <github.com@cefn.com>
Date: Sat, 29 Jan 2022 23:06:06 +0000
Subject: [PATCH 2/2] Add utility to map typed state

---
 src/components/HelloWorld.vue | 7 +++----
 src/store/index.ts            | 7 ++++++-
 src/store/util.ts             | 8 ++++++++
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 src/store/util.ts

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index e14ddde..9b10761 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -127,16 +127,15 @@
 </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.$store.state.message.split("");
+      const chars = this.message.split("");
       chars.reverse();
       return chars.join("");
     },
diff --git a/src/store/index.ts b/src/store/index.ts
index 036b337..b6ff465 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,9 +1,10 @@
 import Vue from "vue";
 import Vuex from "vuex";
+import { mapTypedState } from "./util";
 
 Vue.use(Vuex);
 
-interface RootState {
+export interface RootState {
   message: string;
 }
 
@@ -11,6 +12,10 @@ const state: RootState = {
   message: "olleH",
 };
 
+export function mapRootState(keys: (keyof RootState)[]) {
+  return mapTypedState<RootState>(keys);
+}
+
 export default new Vuex.Store({
   state,
   mutations: {},
diff --git a/src/store/util.ts b/src/store/util.ts
new file mode 100644
index 0000000..3d8814f
--- /dev/null
+++ b/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];
+  };
+}