Каков наилучший способ использования коммитов в vuex?

Question

Я ежедневно использую vue и vuex для создания своих проектов, иногда при выполнении http-запросов нет необходимости создавать мутации состояния. Я использую этот способ:

actions:{
   theAction({},payload){
      // bla bla
   }
}

Таким образом, я получаю предупреждение, однако я могу выполнить действие. Чтобы избежать этого предупреждения, я смог наблюдать, что некоторые люди рекомендуют создавать это действие внутри компонента, потому что это утомительно, поскольку идеальной вещью является обработка логики c из состояния

. Мой вопрос Какая лучшая практика для создания такого рода действий?

Answer 1

Может быть, что-то полезное добавить.

При использовании таких фреймворков, как NUXT , вы можете предоставлять плагины. Так что в случае вызовов API, которые не связаны с мутациями магазина, но являются практичными в разных компонентах, плагин будет очевидным решением.

nuxt.config. js

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/register-api',
  ],

~ / plugin / register-api. js

import Vue from 'vue';
import api from '~/api';

export default function ({ store }) {
  store.$api = api;

  const ApiUtilityPlugin = {
    install() {
      Vue.prototype.$api = api;
    },
  };

  Vue.use(ApiUtilityPlugin);
}

~ / api / index. js

import { service } from 'package'

export default function () {
  return {
    async getValue() {
      await service.getValue();
    },
  };
}

Vue Компонент

<script>
export default {
 methods: {
  callAPI() {
   this.$api.getValue();
 },
};
</script>

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

Answer 2

Если вы используете полученные данные во многих компонентах, вы должны хранить их в состоянии с использованием мутации. Если вы используете данные в определенном компоненте, но не хотите получать их непосредственно от компонента и можете поместить этот вызов в отдельный js -модуль в папке api, где размещаются все такие запросы.

Обновление:

Это пример js -модуля из папки api: items. js

import axios from 'axios'

export default {
  async getItems (options) {
    const { data: result } = await axios.post('/api/items', options)
    return result
  }
}

Использование: MyComponent. vue

import itemsApi from '@/api/items'
...
export default {
...
data () {
  return {
    items: []
  }
},
methods: {
   async loadItems() {
      this.items = await itemsApi.getItems({})
  }
}

Если вы хотите использовать этот API в нескольких компонентах с помощью sh, вы можете создать mixin с помощью этой функции loadItems.

Это пример действия и мутации элементы модуля состояния. js:

import itemsApi from '@/api/items'

const GET_ITEMS = 'GET_ITEMS'

const state = {
  items: []
}

const actions = {
  async getItems ({ commit }, params) {
    const items = await itemsApi.getItems(params)
    commit(GET_ITEMS, items)
  },
}
const mutations = {
  [GET_ITEMS] (state, items) {
    state.items = items
  }
}
export default {
  namespaced: true,
  state,
  actions,
  mutations
}

Использование:

MyComponent. vue

<script>
import { mapActions, mapState } from 'vuex'
...
export default {
...
computed: {
  ...mapState({
    items: state => state.items.items
  }),
},
methods: {
   ...mapActions({
     getItems: 'items/getItems',
    }),
   async loadItems() {
      await this.getItems({})
      // now you have the loaded items in this.items
  }
}