Vue.js 在vuex中使用提交的最佳方式是什么？

我每天使用vue和vuex创建项目，有时在发出http请求时，不必创建状态的变化。我这样说：

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

这样我会得到警告，但我可以执行该操作。我已经能够观察到一些人建议在组件内部创建此操作，以避免出现此警告，因为我认为这很乏味，因为理想的事情是处理来自状态的逻辑

---

我的问题是，创建此类操作的最佳实践是什么？

如果在许多组件中使用接收到的数据，则应使用变异将其存储在状态中。 如果您在某个组件中使用数据，但不希望直接从该组件接收数据，则可以将此调用放在api文件夹中的某个地方的separete js模块中，所有此类请求都放在该模块中

更新：

以下是api文件夹中js模块的示例： items.js

用法： MyComponent.vue

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

<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
  }
}

如果希望在多个组件中使用此API，则可以使用此loadItems函数创建mixin

这是state module items.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

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

<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
  }
}

从“vuex”导入{mapActions，mapState}
...
导出默认值{
...
计算：{
…地图状态({
items:state=>state.items.items
}),
},
方法：{
…映射操作({
getItems:'items/getItems'，
}),
异步加载项（）{
等待此消息。getItems（{}）
//现在您已经在这个.items中加载了项目
}
}

可能需要添加一些有用的内容

当使用像NUXT这样的框架时，您可以提供插件。因此，对于与存储突变无关但在不同组件中实用的API调用，插件将是一个明显的解决方案

numxt.config.js

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

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);
}

import { service } from 'package'

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

~/plugin/register api.js

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

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);
}

import { service } from 'package'

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

~/api/index.js

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

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);
}

import { service } from 'package'

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

Vue组件

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

导出默认值{
方法：{
callAPI（）{
这是.$api.getValue（）；
},
};

---

因此，通过这种方式，您可以在应用程序中调用不同的API，而不会误用应用商店。

我有一个类似的问题。您能否提供一个更全面的答案，说明此设置应该如何工作？