gpt4 book ai didi

javascript - Vuex 中如何访问 mapState 并渲染到 View

转载 作者:行者123 更新时间:2023-11-30 19:23:47 24 4
gpt4 key购买 nike

我正在尝试使用 Axios 将所有数据从 API 返回到我的 View ,并使用 Vuex 来存储我的状态。此源代码可以返回'''console.log'''但不能传递给 View 。

我曾尝试将 mounted() 更改为 change() 但它仍然不起作用

这是我的源代码:在‘./store/modules/form.js’中:

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);

const state = {
posts: [],
};
const mutations = {
setPosts(state, posts) {
state.posts = posts;
}
};
const actions = {
loadPosts({ commit }) {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then(response => resnponse.data)
.then(posts => {
commit("setPosts", posts);
console.log(posts);
});
}
};
export default {
//namespaced: true,
state,
mutations,
actions
};

在 './store/index.js 中:

import Vuex from "vuex";
import Vue from "vue";
import form from "./modules/form";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
Vue.use(Vuex);

export default new Vuex.Store({
modules: {
form
}

});

在‘components/Posts.vue’中:

<template>
<div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
</thead>
<tbody>
<tr v-for="post in posts" :key="post.id">
<td>{{ post.id }}</td>
<td>{{ post.title }}</td>
<td>{{ post.body }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>

<script>
import { mapState } from "vuex";
export default {
name: "PostsPage",
computed: mapState(["posts"]),
mounted() {
this.$store.dispatch("loadPosts");
},
};
</script>

如果你能帮助我,非常感谢。

最佳答案

我开始认为,既然他正在使用 modules,他应该尝试一下

computed: mapState("form", ["posts"]),

(我的代表太低了,无法添加评论 :( )

关于javascript - Vuex 中如何访问 mapState 并渲染到 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57145244/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com