在vuex中运行以下代码时，“ mapGetters”未定义

问题描述

我不明白为什么未定义map getter。我一直在尝试遵循参考。 这个我的索引组件文件和这个文件应该执行删除或获取帖子的操作。

IndexComponent.vue

Add app icons to the home screen | For new apps

然后我得到了这个存储文件。

store.js

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

这是我的post.js文件。在我的post.js文件中，我拥有了所有状态，吸气剂，动作，突变。

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

解决方法

您错过了导入：

 import { mapGetters,mapActions} from 'vuex';

然后像这样使用它：

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