'mapGetters' is not defined' when running the code below in vuex

Question

I dont understand why the map getter is not defined. I have been trying to follow the reference. This my index component file and this file should get the actions to remove or fetch posts.

IndexComponent.vue

<template>
  <div>
    <h1>Posts</h1>
    <div class="row">
      <div class="col-md-10"></div>
      <div class="col-md-2">
        <router-link :to="{ name: 'create' }" class="btn btn-primary"
          >Create Post</router-link
        >
      </div>
    </div>
    <br />

    <table class="table table-hover">
      <thead>
        <tr>
          <th>Title</th>
          <th>Body</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="post in posts" :key="post._id">
          <td>{{ post.title }}</td>
          <td>{{ post.body }}</td>
          <td>
            <router-link
              :to="{ name: 'edit', params: { id: post._id } }"
              class="btn btn-primary"
              >Edit</router-link
            >
          </td>
          <td>
            <button
              class="btn btn-danger"
              @click.prevent="deletePost(post._id)"
            >
              Delete
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "IndexComponent",
  methods: {
    ...mapActions(["fetchPosts", "deletePost"]),
    onDblClick(post) {
      const updPost = {
        id: post.id,
        title: post.title,
        completed: !post.completed,
      };
      this.updatePost(updPost);
    },
  },
  // COMPUTED - to define which getters to use
  computed: mapGetters(["allPosts"]),
  created() {
    this.fetchPosts();
  },
};
</script>

And then i got this storefile.

store.js

import Vuex from "vuex";
import Vue from "vue";
import store from "./post";

//load Vuex
Vue.use(Vuex);

//create store
export default new Vuex.Store({
  modules: {
    post,
  },
});

And this is my post.js file. In my post.js file i have all my state, getters, actions, mutations.

post.js

import axios from "axios";

const state = {
  posts: [],
};

const getters = {
  allPosts: (state) => state.Posts,
};

const actions = {
  //an action: makes a request, gets a response and calls a mutation
  async fetchPosts({ commit }) {
    // commit - to call the mutation
    const response = await axios.get("http://localhost:4000/posts");
    commit("setPosts", response.data);
  },
  async addPosts({ commit }, title) {
    const response = await axios.post("http://localhost:4000/posts/add", {
      title,
      completed: false,
    });
    commit("newPost", response.data);
  },
  async deletePosts({ commit }, id) {
    await axios.delete(`http://localhost:4000/posts/delete/${id}`);
    commit("removePosts", id);
  },
  async filterPosts({ commit }, e) {
    //Get selected number
    // const limit = parseInt(e.target.options[e.target.options.selectedIndex].innerText);
    const limit = e.target.value;
    const response = await axios.get(`http://localhost:4000/posts`);
    commit("setPosts", response.data);
  },
  async updatePosts({ commit }, updatePosts) {
    const response = await axios.put(
      `http://localhost:4000/posts/update/${this.$route.params.id}`,
      updatePosts
    );
    console.log(response.data);
    commit("updatePosts", response.data);
  },
};

const mutations = {
  setPost: (state, posts) => (state.posts = posts),
  newPost: (state, posts) => state.posts.unshift(posts),
  removePost: (state, id) =>
    (state.posts = state.posts.filter((posts) => posts.id !== id)),
  updatePosts: (state, updPosts) => {
    const index = state.Posts.findIndex((posts) => posts.id === updPosts.id);
    if (index !== -1) {
      state.posts.splice(index, 1, updPosts);
    }
  },
};

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

//this is a boilerplate for vuex module

Answer 1

You missed to import it :

 import { mapGetters,mapActions} from 'vuex';

then use it like :

 computed:{ ...mapGetters(["allPosts"])},