mapActions not returning action from module

Question

I am trying to add the Actions I created in my Vuex module to the Methods of my component.

My component "HomePage.vue" looks like this

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

My Vuex module "tasks.js" looks like this

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

When attempting to use this.fetchTasks() in created(), nothing happens. When console logging this.fetchTasks() it returns as undefined

did you try to call it in the `mounted` hook ? – Boussadjra Brahim Apr 17 '20 at 20:55 — Boussadjra Brahim, Apr 17 '20 at 20:55
@BoussadjraBrahim I did but i still returns as undefined – YaboiJ Apr 17 '20 at 21:05 — YaboiJ, Apr 17 '20 at 21:05

score 0 · Answer 1 · answered Apr 17 '20 at 21:35

0

Considering your tasks is a module of your vuex store, you should call your mapActions, mapGetters this way :

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

answered Apr 17 '20 at 21:35

BTL

4,311
3
24
29

mapActions not returning action from module

1 Answers1