From dab0c7be344a0bf6c1c13fb7146924b074d83785 Mon Sep 17 00:00:00 2001
From: sabertazimi <sabertazimi@gmail.com>
Date: Tue, 28 Sep 2021 01:50:47 +0800
Subject: [PATCH] fix(Vue-vuex): computed value from vuex state

- Wrap `useStore` to `useAppStore` for types inference.
- Passing computed value from vuex state to template.
---
 packages/vue-trello/src/store/index.ts  |  6 ++++--
 packages/vue-trello/src/views/Board.vue |  4 ++++
 packages/vue-trello/src/views/Task.vue  | 16 +++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/vue-trello/src/store/index.ts b/packages/vue-trello/src/store/index.ts
index 2b19358d..e535cacf 100644
--- a/packages/vue-trello/src/store/index.ts
+++ b/packages/vue-trello/src/store/index.ts
@@ -1,5 +1,5 @@
 import { InjectionKey } from 'vue';
-import { createStore, Store } from 'vuex';
+import { createStore, useStore, Store } from 'vuex';
 import { getDefaultBoard } from 'src/services';
 import type { BoardType } from 'src/services';
 
@@ -19,6 +19,8 @@ const store = createStore<State>({
   modules: {},
 });
 
-export { key };
+const useAppStore = () => useStore<State>(key);
+
+export { key, useAppStore };
 export type { State };
 export default store;
diff --git a/packages/vue-trello/src/views/Board.vue b/packages/vue-trello/src/views/Board.vue
index 3b5eb0b1..f900fb8a 100644
--- a/packages/vue-trello/src/views/Board.vue
+++ b/packages/vue-trello/src/views/Board.vue
@@ -7,5 +7,9 @@ import HelloWorld from 'src/components/HelloWorld.vue';
   <router-link class="router-link" :to="{ name: 'task', params: { id: 123 } }">
     To task
   </router-link>
+  |
+  <router-link class="router-link" :to="{ name: 'board' }">
+    Back home
+  </router-link>
   <router-view />
 </template>
diff --git a/packages/vue-trello/src/views/Task.vue b/packages/vue-trello/src/views/Task.vue
index 37f76516..c7ba44f6 100644
--- a/packages/vue-trello/src/views/Task.vue
+++ b/packages/vue-trello/src/views/Task.vue
@@ -1,7 +1,21 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { useAppStore } from 'src/store';
+
 defineProps<{ id: string }>();
+
+const store = useAppStore();
+const columns = computed(() => store.state.board.columns);
 </script>
 
 <template>
-  <div>Task View {{ id }}</div>
+  <div v-if="columns">
+    <div v-for="column in columns" :key="column.name">
+      <ul v-if="column.tasks">
+        <li v-for="task in column.tasks" :key="task.id">
+          {{ task.name }}
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>