Inject function 사용법 + 플러그인 추가

nuxt.config.js

@@ -34,6 +34,7 @@ module.exports = {
   plugins: [
     {src: '~/plugins/filters'},
     {src: '~/plugins/vuelidate'},
+    {src: '~/plugins/integrations'},
     {src: '~/plugins/toasted', ssr: false},
   ],
   /*

pages/blogs/index.vue

@@ -35,8 +35,12 @@
                 </div>
                 <div class="sidebar-list">
                   <!-- Featured Blogs -->
-                  <p>
-                    <nuxt-link :to="``">Some favorite blog</nuxt-link>
+                  <p
+                    v-for="fBlog in featuredBlogs"
+                    :key="fBlog._id">
+                    <nuxt-link :to="`/blogs/${fBlog.slug}`">
+                      {{fBlog.title}}
+                    </nuxt-link>
                   </p>
                   <!-- Featured Blogs -->
                 </div>
@@ -54,7 +58,8 @@ import { mapState } from 'vuex';
 export default {
   computed: {
     ...mapState({
-      publishedBlogs: state => state.blog.items.all
+      publishedBlogs: state => state.blog.items.all,
+      featuredBlogs: state => state.blog.items.featured,
     })
   },
   async fetch({store}) {

plugins/integrations.js

@@ -0,0 +1,25 @@
+export default (_, inject) => {
+  inject('applyParamsToUrl', (url, filter) => {
+    debugger
+    if (filter) {
+      let filteredEntities = ''
+      if (url.indexOf('?') === -1) {
+        url += '?'
+      } else {
+        url += '&'
+      }
+
+      Object.keys(filter).forEach(key => {
+        filteredEntities += `${key}=${filter[key]}&`
+      })
+
+      if (filteredEntities.slice(-1) === '&') {
+        filteredEntities = filteredEntities.slice(0, -1)
+      }
+
+      return url + filteredEntities
+    }
+
+    return url
+  })
+}

store/blog.js

@@ -1,27 +1,3 @@
-const applyParamsToUrl = (url, filter) => {
-  if (filter) {
-    let filteredEntities = ''
-    if (url.indexOf('?') === -1) {
-      url += '?'
-    } else {
-      url += '&'
-    }
-
-    Object.keys(filter).forEach(key => {
-      filteredEntities += `${key}=${filter[key]}&`
-    })
-
-    if (filteredEntities.slice(-1) === '&') {
-      filteredEntities = filteredEntities.slice(0, -1)
-    }
-
-    return url + filteredEntities
-  }
-
-  return url
-}
-
-
 export const state = () => ({
   item: {},
   items: {
@@ -44,7 +20,7 @@ export const actions = {
 
   // /api/v1/blogs?filter[featured]=true
   async fetchFeaturedBlogs({commit, state}, filter) {
-    const url = applyParamsToUrl('/api/v1/blogs', filter)
+    const url = this.$applyParamsToUrl('/api/v1/blogs', filter)
     const data = await this.$axios.$get(url)
     if(data.isAxiosError === true){
       console.log(data.data)