如何调用动作（NuxtJs）

Question

我正在尝试从商店中调用Vue中的一项操作。

这是我在商店中的文件aliments.js：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const state = () => ({
  aliments: {},
})
export const mutations = () => ({
  SET_ALIMENTS(state, aliments) {
    state.aliments = aliments
  }
})
export const actions = () => ({
  async getListAliments(commit) {
    await Vue.axios.get(`http://localhost:3080/aliments`).then((response) => {
      console.log(response);
      commit('SET_ALIMENTS', response);
    }).catch(error => {
      throw new Error(`${error}`);
    })
    // const data = await this.$axios.get(`http://localhost:3080/aliments`)
    // commit('setUser', user)
    // state.user = data;
    // return state.user;
  }

})
export const getters = () => ({
  aliments (state) {
    return state.aliments
  }
})

我想用：]显示我的Vue中的饮食清单>

{{ this.$store.state.aliments }}

我这样称呼我的动作：

<script>
import { mapGetters, mapActions } from 'vuex'

export default {

  computed: {
    ...mapGetters(['loggedInUser', 'aliments']),
    ...mapActions(['getListAliments']),
    getListAliments() {
      return this.$state.aliments
    }
  }
}
</script>
我不知道我的错误在哪里：/

NB：我还尝试了对带有调度（'aliments / getListAliments'）的按钮使用onclick方法...但不起作用...

我正在尝试从商店中通过自己的Vue调用一项操作。这是我商店中的aliments.js文件：从'vue'导入Vue；从'vuex'导入Vuex;从'axios'导入axios; Vue.use（Vuex，axios）; ...

Answer 1

问题是，您正在将动作映射到组件的“计算”部分中，应该将其映射到“方法”部分中！

Answer 2

您好，欢迎来到StackOverflow