个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
下面的简单代码让我很头疼，因为 some-component 和 root 实例都向控制台记录错误，而不是从 vuex 对象绑定(bind)。我在这里可能会遗漏什么？
var state = {
counter: 0
};
var mutations = {};
var store = new Vuex.Store({state, mutations});
var someComponent = Vue.extend({
template: '<div>{{counter}}</div>',
//data: function(){return {counter: 0}},
vuex: {
getters: {
counter: getCounter
}
}
});
new Vue({
el: '#app',
components: {
'some-component': someComponent
},
store: store,
vuex: {
getters: {
counter: getCounter
}
}
});
function getCounter(state) {
return state.counter;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-bug</title>
</head>
<body>
<div id="app">
<span>{{counter}}</span>
<some-component></some-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.1/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0-rc.1/vuex.js"></script>
</body>
</html>在我的代码中，我正在调用 Vue.use(Vuex)，但在这个 fiddle 中我不必这样做(它说 Vuex 已经注册)。另外，请注意，如果您取消注释包含数据的行，组件将正确呈现。
非常感谢任何帮助。
最佳答案
如果你使用的是 Vue/Vuex 2.0，你应该看看这个 link .在 vuex 2.0 中，您不会在组件内创建属性 vuex 来设置 getter 和操作。相反，在您的 store.js 文件中，您定义了一个 getters 对象，您将从状态中获取 Prop ，然后将其注入(inject)商店，如下所示:
const state = {
counter: 0
}
const getters = {
getCounter: state.counter
}
const actions = {}
const mutations = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
在您的组件中，您可以使用计算属性定义 getter，如下所示:
import { mapGetter, mapActions } from 'vuex'
export default {
template: '#some-template',
computed: {
yourFirstComputed() {},
anotherOfYourComputed() {},
...mapGetters({
getCounter: 'getCounter'
})
},
methods: {
yourMethod(){},
...mapActions({
anyOfYourActions: 'anyOfYourActions'
})
}
}
然后您可以像使用普通计算一样调用这些 Prop 。我再说一遍，这适用于 vuex 2，我认为您在阅读了对问题的评论后正在使用它。
希望对您有所帮助!
关于vue.js - Vuex 在子组件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39481929/
24
4
0
我刚刚开始使用 Vuex，但遇到了问题(这可能是我的一些无能为力的语法错误)。我有一个用户喜欢 like_items 并且有一个网络调用，它与一个项目不同。 mutations: { SET_TOGG
我刚开始在这里学习 Vuex。到目前为止，我一直将共享数据存储在 store.js 中。文件和导入store在每个模块中，但这越来越烦人，我担心会发生变异。 我正在努力解决的是如何使用 Vuex 从
我正在创建一个使用 Fabric.js 来管理 Canvas 的 Vue 应用程序。 我想使用 Vuex 管理 Canvas 状态。为此，我将 fabric canvas 实例设置为 vuex 状态变
我正在构建一个 Nuxt 应用程序，我正在从我在本地主机上运行的节点后端获取一些数据。 我有一个插件 getApps.js export default ({ store }) => { st
我想安装 Vuex 但出现错误。 // error npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree
我使用 vuex-persistedstate 包( https://github.com/robinvdvleuten/vuex-persistedstate )在浏览器上保持数据状态。 我使用 A
假设我有一个简单的 Vuex 状态来保存食谱: const state = { recipe: { id: '', name: "", ingr
目前，我有一个具有 2 个状态属性的商店 - 版本和冠军 + 2 个发出 GET 请求然后提交到状态的操作。第二个 GET 请求 URL 需要包含我从第一个 GET 请求获取的版本，如下所示: axi
我有一个基于 Vue 和 Vuex 的小应用程序。它只是一个包含类似项目的表格 {{ item.name }} Edit Items 数组是使用 getter 从
我有一个 Vuex getter，我从应用程序中的各个组件调用它。但是，我发现在调用 getter 之前需要稍微复杂一些的逻辑，所以我使用了 Vuex Action。如何使用操作中的参数调用 gett
为什么会出现此错误: Error [vuex] Do not mutate vuex store state outside mutation handlers. 这是什么意思？ 当我尝试输入编辑输入
在 Nuxt 文档(here)中，它说“您可以选择将模块文件分解为单独的文件:state.js、actions.js、mutations.js 和 getters.js。” 我似乎找不到任何示例来说明
我正在使用 TypeScript 构建一个简单的 vue 项目。我在我的 vue 项目中编写了 vuex 商店，该商店有一个名为“计算”的子模块。但是一旦创建了包含子模块的主存储，就会发生奇怪的错误(
我完全熟悉 Vuex，但我对 Vue 组合 API 一无所知。这到底是怎么回事，它和Vuex有什么区别？它涵盖了 Vuex 中的哪些差距，以及何时何地使用它们更好？ 感谢您的帮助。 最佳答案 首先，
简短的问题:是否可以通过 Nuxt Auth 模块手动更新 Vuex 中的用户数据？ 为什么我有这个问题:我的问题是这个。我在用户文档中的 MongoDB 中保存了一些 Likes/Follows。我
尝试将带有 vuex-module-decorators 的存储模块加载到初始化程序中时出现此错误: vuex.esm.js?2f62:261 Uncaught TypeError: Cannot r
我有一个 VueX 商店，有两个模块，user.js 和merchant.js，顶层是index.js。 user.js 中的 getter 是: 重构 const getters = { s
我在我的代码库中偶然发现了这个错误，并试图看看是否有人可以修复它。 以下是我的 listings/actions.js export const fetchFeaturedListings = ({
我正在尝试将 Vuex 与 Vue 3 一起使用。这是我在 main.js 中的代码: import { createApp } from 'vue'; import App from './App.
我在我的代码库中偶然发现了这个错误，并试图看看是否有人可以修复它。 以下是我的 listings/actions.js export const fetchFeaturedListings = ({
我是一名优秀的程序员,十分优秀！