Lesson 2: Loading data from Vuex

src/store.js

@@ -1,12 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import defaultBoard from './default-board'
+import { saveStatePlugin } from './utils'
 
 Vue.use(Vuex)
 
 const board = JSON.parse(localStorage.getItem('board')) || defaultBoard
 
 export default new Vuex.Store({
+  plugins: [saveStatePlugin],
   state: {
     board
   },

src/utils.js

@@ -4,6 +4,11 @@ export function uuid () {
 
 export function saveStatePlugin (store) {
   store.subscribe(
-    (mutation, state) => localStorage.setItem('boards', JSON.stringify(state.boards))
+    (mutation, state) => {
+      localStorage.setItem(
+        'board',
+        JSON.stringify(state.board)
+      )
+    }
   )
 }

src/views/Board.vue

@@ -1,12 +1,41 @@
 <template>
   <div class="board">
-
+    <div class="flex flex-row items-start">
+      <div
+        class="column"
+        v-for="(column, $columnIndex) of board.columns"
+        :key="$columnIndex"
+      >
+        <div class="flex items-center mb-2 font-bold">
+          {{ column.name }}
+        </div>
+        <div class="list-reset">
+          <div
+            class="task"
+            v-for="(task, $taskIndex) of column.tasks"
+            :key="$taskIndex"
+          >
+            <span class="w-full flex-no-shrink font-bold">
+              {{ task.name }}
+            </span>
+            <p
+              v-if="task.description"
+              class="w-full flex-no-shrink mt-1 text-sm"
+            >
+              {{ task.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
+import { mapState } from 'vuex'
 
+export default {
+  computed: mapState(['board'])
 }
 </script>