javascript - 在 vuex 中运行以下代码时未定义“mapGetters”
问题描述
我不明白为什么未定义地图吸气剂。我一直在尝试遵循参考。这是我的索引组件文件,该文件应该获取删除或获取帖子的操作。
索引组件.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>
然后我得到了这个存储文件。
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,
},
});
这是我的 post.js 文件。在我的 post.js 文件中,我有我所有的状态、getter、动作、突变。
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
解决方案
您错过了导入它:
import { mapGetters,mapActions} from 'vuex';
然后像这样使用它:
computed:{ ...mapGetters(["allPosts"])},
推荐阅读
- android - Google App 从 apk 更改为 app-bundle 并在 Internal Test Track 上发布,但只能找到/下载最新的 apk 版本
- python - 如何使 asyncio cancel() 实际取消任务?
- c++ - TCP 客户端不会自动连接到服务器
- scala - Lagom - 在服务调用组合中添加响应头
- python - Python多个数据框到一个文件
- r - 计算一组数内连续值的最大长度
- monetdb - 在使用 csv 批量加载命令将 csv 文件数据加载到 monet db 时,我们如何用 NULL 替换“”(空字符串)
- java - 预期类型和标识符的非法开头
- java - 我应该在哪里保留将 DTO 转换为实体的方法,反之亦然?
- python - 在我通过正则表达式传递的那些模式中,哪个模式匹配?