mapActions 未从模块返回操作答案

【问题标题】：mapActions not returning action from modulemapActions 未从模块返回操作
【发布时间】：2020-04-17 20:50:35
【问题描述】：

我正在尝试将我在 Vuex 模块中创建的操作添加到我的组件的方法中。

我的组件“HomePage.vue”看起来像这样

import { PlusIcon } from "vue-feather-icons";
import TaskItem from "../TaskItem";
import moment from "moment";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "home-page",
  components: {
    PlusIcon,
    TaskItem,
  },
  methods: {
    ...mapActions(['fetchTasks'])
  },
  computed: mapGetters(['allTasks']),
  created() {
    setInterval(() => {
      document.getElementById("time").innerHTML = moment().format("h:mm:ss a");
    }, 1000);
  },
};

我的 Vuex 模块“tasks.js”看起来像这样

import fs from 'fs'

const state = {
  tasks: []
}
const getters = {
  allTasks: (state) => state.tasks
}

const actions = {
  fetchTasks({commit}) {
    let rawdata = fs.readFileSync('../backend/tasks.json')
    console.log(JSON.parse(rawdata))
    commit('setTasks', JSON.parse(rawdata))
  }
}

const mutations = {
  setTasks: (state, passedTasks) => (state.tasks.push(passedTasks))
}

export default {
  state,
  getters,
  actions,
  mutations,
}

尝试在 created() 中使用 this.fetchTasks() 时，没有任何反应。当控制台记录 this.fetchTasks() 它返回为 undefined

【问题讨论】：

您是否尝试在 mounted 挂钩中调用它？
@BoussadjraBrahim 我做了，但我仍然返回未定义

标签： vue.js vuex

【解决方案1】：

考虑到您的tasks 是您的vuex 商店的一个模块，您应该这样称呼您的mapActions、mapGetters：

methods: {
  ...mapActions('tasks', ['fetchTasks'])
},
computed: {
  ...mapGetters('tasks', ['allTasks'])
},

【讨论】：