- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 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/
我有一个模块 export default { namespaced: false, state, actions, mutations, getters }; 在我的组件中我尝试
我正在尝试在我的 Vue 页面中映射我商店的状态变量: export default { data: () => ({ localData: []
我正在动态注册 vuex 商店模块 store.registerModule('home.grid', GridStore) 然后在组件中: export default { name: 'GridC
我looked at several questions弄清楚我是什么做错了。在我看来一切都正确设置。 目标 根据 COMPONENT A 的值,在 DEPENDENT COMPONENT 中使用 v
我一定是遗漏了什么。如何将 vuex mapState 与多个模块一起使用? 据了解,除了将对象作为参数传递外,命名空间 mapState 还可以采用两个参数:命名空间和表示模块成员的对象名称数组。像
我在 Vue 2 项目中使用 typescript ,现在我需要第一次使用 Vuex 和 typescript 。我根据在 SOF 或博客上找到的答案写了这篇文章,但它给了我错误,我不知道如何解决它。
我正在 Java 中实现一个 Flink 程序,以使用 MapStateDescriptor 处理状态。我的实现基于此 source 。由于某种原因,MapState 保留了以前的值,我无法计算出我想
我正在尝试使用 Axios 将所有数据从 API 返回到我的 View ,并使用 Vuex 来存储我的状态。此源代码可以返回'''console.log'''但不能传递给 View 。 我曾尝试将 m
我尝试将 Vuex 代码分离到模块中,但无法从 mapState() 获取数据。 创建模块和使用映射的最佳方式是什么? 我有一个存储文件夹: ├── store │ └── index.js |
我正在编写一段使用 org.apache.beam.sdk.state.MapState 的数据流转换实现缓存功能。然而在介绍MapState ,单元测试开始功能障碍。异常显示:java.lang.U
我尝试使用 mapState 函数从商店获取状态,但我无法使用将值返回到我的模板代码中的生成代码... // Some code
无法在重新加载页面后将 mapState 的值分配给 data 属性,如果您转到子页面,它可以工作,但如果您已经站在子页面并重新加载浏览器,则不会。 计算的 mapState computed: {
我在我的组件中使用了一个存储值并尝试更新它。当我点击按钮时存储值发生了变化,但是这个变化没有反射(reflect)在组件输出中(即 {{query}}) span {{qu
我有这个代码: computed: { mapState(["appErrors", "user", "profilesFor"]), compiledData () {
我想通过 mapState 分配 setter 方法。我目前使用一种变通方法,将我感兴趣的变量 (todo) 命名为临时名称 (storetodo),然后在另一个计算变量 中引用它>待办事项。 met
我有一个由第一个预处理任务组成的状态机,它生成一个数组作为输出,随后的映射状态使用它来循环。第一个任务的输出数组太大,状态机抛出错误 States.DataLimitExceeded :The sta
在 vuex mapState 中计算数据时,我有一项重要任务要做。每次数据更改时,我都需要调用此 vue 方法 countAlerts;为此,计算属性需要调用该方法,但是 this 作用域在使用 i
所以我正在试验一个使用 vue cli 创建的新项目,我在其中使用路由器和 VueX 所以在我的 HelloWorld.vue 文件中,我在脚本部分有这段代码: import { mapState }
我期望如果我有一个模块有 namespaced:false(我认为这也是默认的)那么它的 state 应该是“全局”的一部分"或 "root"命名空间,我将能够执行 "...mapState('som
我正在为 Vue.js 运行一些测试代码,并通过脚本标签包含 Vue.js、Vuex 和 javascript 文件(因为它仅用于测试目的,我不想使用构建工具)。 大部分代码运行正常,但 Vuex m
我是一名优秀的程序员,十分优秀!