NUXT как профессионал. Используйте шаблон обслуживания (моя лучшая практика)

вступление

Мы все знаем, что Nuxtjs – это удивительная структура. В отличие от угловой, который имеет хорошо структурированную папку для услуг, NUXT нет. Но, как и каждый хороший разработчик NUXT, использование услуг имеет важное значение, особенно при использовании Vuex с Nuxtjs.

Реализация услуг в NUXT

Прежде чем мы реализуем услуги, убедитесь, что у вас есть Vuex. , Nuxtjs/Axios Установлен в вашем проекте.

В плагины Каталоги, создайте новый файл (например, Service.js)

export default ({$axios}, inject) => {
  inject('getProductList', async (params) => await $axios.get('cool_get_url', {
    params
  }))
  inject('createProduct', async (data) => await $axios.post('cool_post_url', data))
  // ... and so on
}

Итак, в нашем компоненте NUXT мы можем получить доступ к этим услугам в контексте Это Отказ

Или, если ваша система сложна, и вы используете Vuex , вы можете получить доступ к этим услугам в магазине Vuex.

export default {
  // some basic store configuration
  actions: {
    async getProductList({ commit }) {
      const { data } = this.$getProductList({type: 'awesome type'})
      // data manipulation before commit ...
      commit('MY_AWESOME_MUTATION', data)
    },
    async createProduct({ commit }) {
      const { data } = this.$createProduct({type: 'awesome type'})
      // data manipulation before commit ...
      commit('MY_AWESOME_MUTATION', data)
    },
  }
}

И внутри вашего компонента вы можете использовать MapGetters Чтобы получить данные после вызова действия, используя Картания

Давайте ревертировать код, Моя лучшая практика

Теперь придет время, поэтому позвольте переписать эти услуги. В корне вашего проекта вы можете создать папку под названием Services, а в этой папке создать новый файл с именем product.js (Если вам нравится, вы можете префиснуть его с помощью службы 😉). Здесь содержание этого файла:

export default ($axios) => {
  getProductList: async  (params) => {
    return await $axios.get('cool_get_url', {
      params
    })
  },
  createProduct: async  (data) => {
    return await $axios.post('cool_post_url', data)
  }
  // more verbs and more actions
}

Теперь файл [Service.js] в плагинах будет выглядеть так:

import productService from '~/services/product'

export default ({ $axios }, inject) => {
  const allMethods = {
    ...productService($axios),
    // import another service here
  }
  const methods = Object.keys(allMethods)
  methods.forEach((method) => {
    inject(method, allMethods[method])
  })
}

Мы знаем, что Object.Keys (AllMethods) что это вернется Ключи AllMethods И тогда мы используем эти ключ, как название наших услуг, а AllMethods [Метод] вернет методы в службах. Теперь ввод будет содержит небольшой код, и это более понятно. Наши услуги разделены в новом файле.

Плюс

• Отделение заботы
• Чистый код
• Легко для тестирования E2E
• Легко для тестирования подразделения

Господин

• Больше файлов для обработки
• (Поставить в комментарии, если вы найдете еще один минус с этим подходом)

Теперь для развертывания вы можете прочитать эту статью, которая о оптимизации.

Примечание : Я повторяю это снова, моя собственная практика, которую я использую для любого из наших проектов. Если вы обнаружите это полезным, не стесняйтесь использовать его. 😇

Оригинал: “https://dev.to/radonirinamaminiaina/nuxt-like-a-pro-use-service-pattern-my-best-practice-1dna”