问题标签 [vuex-modules]

我有一个 Vue 组件，它使用带有命名空间模块的 Vuex。

因为我已经从命名空间模块映射了动作，所以我只是在我的组件中像普通方法一样调用动作。但不知何故，它没有调度动作。知道这里出了什么问题吗？

如果我有一个命名空间的 Vuex 模块，如何在 Vue 组件中使用这些状态时为该模块中的状态创建 getter 和 setter？

我正在使用 v-model 将“a”绑定到表单上的文本输入，然后当我编辑控件值时，Vue 给出错误：

[Vue 警告]：已分配计算属性“a”，但它没有设置器。

如何解决这个问题？

（更新了额外的背景）

我有一个 Vuex 存储模块，它需要在开始时自动加载它的数据，所以它在请求时可用（在这种情况下，它是一个“设置”存储，它在启动时从电子设置中加载数据，但是有很多我可能需要这样的东西的原因）。

现在，我通过在我的 store 模块上设置一个特殊的“init”操作并在“mounted”生命周期钩子上从我的 Main.vue 组件调度它来实现这一点，如下所示：

我希望的是一种模块可以简单地初始化自己的方式。理想情况下，类似于我的组件上的“已安装”钩子的生命周期钩子，但在 vuex 存储模块中触发。这样我模块的用户就不需要知道他们必须调用“init”以及实例化它。

我搜索了文档并没有找到解决方案，但如果我只是在寻找错误的东西，我希望有人找到了一种优雅的方法来做到这一点。

我最近从 redux 切换到 VueX，似乎无法更新我的初始状态。我在我的主 App 组件的 created() 挂钩中从后端调用一个 API，该 API 返回初始化状态的数据。我可以看到网络请求和数据，所以我知道正在调用该操作，但似乎没有调用突变或我的突变无法正常工作。我试过在浏览器中调试，但由于某种原因，当我添加断点时，chrome 不允许我看到任何数据。我安装了 Vue devtools 扩展，除了基本状态之外什么都看不到。

注意到我正在使用模块可能很好，并且我正在调用的操作与顶级/根级模块相关联。以下是我认为相关的文件：

总店

南都模块

应用程序.vue

从 API 返回的示例数据

我正在使用Webpack，它是热模块替换 ( HMR ) 功能和Vue.js应用程序中的 Vuex。加载顺序如下：

1. 用户点击消息中的共享链接 - 启动加载 UI 并点击 API 获取某些内容
2. 内容返回 - 初始化根的 Vuex 子模块，让我们调用它subA
3. 初始化后 - 将 UI 转换到另一个页面，并subA使用 getter 显示一些数据。

这在正常情况下每次都有效，但是当我进行文件更改、保存它们（触发 HMR）时，Vuex 子模块subA似乎被重置了——它的所有属性state都设置为初始值。

HMR 如何与 Vuex 交互，为什么会这样？

我正在开发大型 vue 应用程序。
而且，我有很多模块：组织、用户等。
目前我正在考虑大型模块的结构。

请帮助我使其正确且可扩展。

例如。

activeOrganizationId - 它是全局变量，影响所有应用程序。

组织列表 - 它是所有组织的全局变量。
它用于主导航等。

OrganizationsListPage - 它是具有组织、
过滤器等 CRUD 功能的表格。

所以。activeOrganizationId 和模块列表 - 全局。
pages.list - 不是全局的，它是 OrganizationsListPage 。

// vuex Module organizations. organizations: { state: { activeOrganizationId: '' // global app value }, modules: { list: { // global organizations list state: {} }, pages: { modules: { list: { // lazy-load module for organizations list page // registered in beforeCreate, unregistered in destroyed hooks state: {} } } } } }

我正在做一个图表组件，它将在页面上多次表示。

为此，我使用了 Vuex，我有突变/动作来获得那个日期，并且一切正常。

在图形组件中，在 created() 中，我调用了发出请求的操作，并且我想将日期传递给图表。

状态如下 -

如果我从状态执行 console.log，它看起来很好，但如果使用密钥返回未定义。

我发现将状态传递给图表的唯一方法是超时，但我认为这不是最好的方法。

这是我的代码

页面组件 -

图表的组成部分 -

带有 vuex 的文件 -

有什么建议吗？

我想使用 Nuxt 中的 Vuex 存储模块从后端返回一条记录。

我的组件中有以下内容，它传递了我想要的值（即 $route.params.caseId ）

我将 $route.params.caseId 传递到我的 vuex 商店模块中的 getCase 操作中，如下所示

转换案例是从 firebase 键中提取 id 并将其作为 id 字段添加到我的数组中（这对于以这种方式来自 firebase 的单个结果是否正确？）

我的突变

现在当我使用

案例名称：{{ caseId.case_name }}

不过我没有收到错误，请对我做错的事情有任何想法

多谢

我正在尝试将我的 Nuxt Vuex 存储文件拆分为单独的文件。并且没有将所有Vuex 放入一个巨大的文件中getters。顺便说一下，这个演示项目在 Github 上。mutationsactions

我读过这个官方的 Nuxt Vuex Store 文档；但似乎无法让它工作。在哪里放东西有点模糊。

我在这些文件中有以下内容：

下面是我的：store/index.js

这是在我的：store/auth.js

最后在我的：pages/index.vue

这就是我称之为登录突变的地方：

我得到的错误：

[vuex] unknown mutation type: login

我在这里做错了什么？我以为我正确地导入了所有的东西store/index.js

所以我目前面临如何在 Vuex 中存储数据的逻辑问题。

该category对象包含大量关于类别的数据，例如图标、标题、路径等，并且该product对象将被发送到服务器，因此基本上它只需要category.id属性。

所以我的问题是我应该将整个类别对象存储在 Vuex 的产品中，还是只做@click="setProductCategory(category.id);"一些额外的事情来显示类别名称？