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

@@ -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;

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>

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>