Vuex.store 적용 > async fetch + store.dispatch

pages/index.vue

@@ -68,9 +68,17 @@
 
 <script>
 export default {
-  async asyncData ({ app }) {
-    const topHeadlines = await app.$axios.$get('/api/top-headlines?country=us')
-    return { headlines: topHeadlines.articles }
+  // async asyncData ({ app }) {
+  //   const topHeadlines = await app.$axios.$get('/api/top-headlines?country=us')
+  //   return { headlines: topHeadlines.articles }
+  // }
+  async fetch ({ store }) {
+    await store.dispatch('loadHeadLines', '/api/top-headlines?country=us')
+  },
+  computed: {
+    headlines () {
+      return this.$store.getters.headlines
+    }
   }
 }
 </script>

store/index.js

@@ -0,0 +1,25 @@
+import Vuex from 'vuex'
+
+const createStore = () => {
+  return new Vuex.Store({
+    state: {
+      headlines: []
+    },
+    mutations: {
+      setHeadLines (state, headlines) {
+        state.headlines = headlines
+      }
+    },
+    actions: {
+      async loadHeadLines ({ commit }, apiUrl) {
+        const { articles } = await this.$axios.$get(apiUrl)
+        commit('setHeadLines', articles)
+      }
+    },
+    getters: {
+      headlines: state => state.headlines
+    }
+  })
+}
+
+export default createStore