问题标签 [vuex-modules]

我遇到了一个怪癖，我似乎无法理解，不知道这是否是 VueX 的标准行为，或者我是否错误地实现了这一点。

我在分配给新变量的模块化商店上有一个 VueX getter。当我尝试操作新分配的变量时，它也会更新状态 - 我如何才能创建 getter 结果的非反应性副本？

这是我的 VueX 代码：

然后，我有一个在动态类比较器中使用该函数的方法 - 本质上，它通过添加新过滤器返回 true 或 false 来判断项目列表是否为空。

这是在返回布尔值之前进行一些计算/操作的方法：

console.log(this.$store.getters['filters/getActiveFilters']) 将返回添加了新值的结果，即使它被添加到不同的变量 - 所以在 v-for 中使用 this 的实例中 -列表每次都不断变大。

关于如何解决的任何想法？

我想按如下方式设置 Vuex 突变：

但我发现了错误：

未捕获的类型错误：无法读取未定义的属性“存储”

如何在模块突变名称中正确使用道具？

我要映射this.$store.commit('form1/changeModel')，form1从props中设置。

我有个问题。我有一个 Vuex 状态。我也在提出 axios 请求。我为带有预定义标头的模板 axios 请求创建了一个单独的文件。它看起来像这样：

问题是在这种情况下存储未定义。那么如何将我的 vuex 商店导入到这个 /src/axios/request.js 文件中呢？我也试过了import { store } from '../store/index'。我的商店是这样的：

也可以由任何人共享以查看任何存储库，其中包含带有模块的 Vuex、带有带有单独预定义模板的文件的 axios。只是想看看如何组织我的项目结构。感谢大家的帮助。

我正在使用带有动作和吸气剂的Vuex 商店user.module，我在我的组件中导入主题，如下所示：

上面的脚本工作得很好，我想要的是范围，命名空间或为我的动作和吸气剂添加一个前缀，以避免与我的组件中的其他方法发生冲突，比如user.isAuthenticated，我尝试了这些组合，但没有一个主题能完成这项工作：

提前致谢。

我有一个可重用的 Vuex 模块，用于 API 的 CRUD 方法。加载时如何从父模块传递相关 URL？例如

company.module.js

crud.module.js

我正在用 TypeScript 中的 Vue 和 Vuex 构建一个站点。（对不起，长代码示例）

我有一个商店模块（'musicArtists'）：

我有一个组件：

该组件位于子页面上。当我导航到页面时，输出和页面最初显示没有“艺术家”，即数组为空。然后 API 调用加载“艺术家”，控制台输出验证“艺术家”是否已加载到状态。但是该页面不会更新新信息，无论是艺术家还是计数。（艺术家组件只显示艺术家的名字）。

要么我在做一些非常简单和愚蠢的事情（完全有可能），要么还有别的事情？？？

I have built an app in Vue. It consists of a number of separate modules, each of which corresponds to a route and has a top-level component (and many sub-components/children). Each module has its own store, actions, mutations and getters, as well as API calls dispatched in the created() hooks of components to fetch necessary data.

This is the structure of my app:

Candidates.vue

/modules/candidates/_store/actions.js

/modules/candidates/_api/index.js

In the beforeCreate() hook of App.vue, I have a helper function to register all of the application modules in one go. I do this my importing the module stores into the helper file and then registering them. This is my helper file:

helpers.js

...and I import into App.vue like this:

However, the import of each module somehow triggers an API call (using the fetchData function), which returns a 401. I have confirmed this by commenting out various parts of helpers.js - and it is definitely the import rather than the functions themselves.

When I remove the import of a module store into helpers.js, the API call is not attempted for that module's top-level component. The weird parts for me are:

1. Even though the actions that should trigger these API call are only dispatched in the top level components of each module, the API calls are attempted every time I reload the login page, even before these components are created;

2. Vue-dev-tools does not register the corresponding events for the actions being dispatched;

3. If I remove all of the store imports from the helper file, no API calls happen.

I have tried changing the format of my imports in vue-router so that components are lazy-loaded, as I thought this might be the issue. The bundle size decreased but it did not fix the phantom API calls. This is how I import them...

/router/index.js

Can anyone explain this behaviour or what I've missed?

如果我尝试this .$session.get(SessionKeys.Cart)这样的组件：

有用。我成功获得会话购物车

但是如果我像这样在我的 vuex 商店中尝试它：

存在错误：Uncaught TypeError: Cannot read property 'get' of undefined

我该如何解决这个错误？

我正在使用 Vue + Vuex 开发一个 Web 应用程序。我是 Vue 的新手。我现在正在做的是尝试将 Vuex 集成到我的 Vue 应用程序中。但是当我使用模块化的 Vuex 时，它不起作用。

这是我的名为 PersonalInfoFormStore.js 的商店文件

然后在 app.js 中，我这样设置了 Vuex 商店

然后在 PersonalInfoForm.vue 中，我尝试像这样访问状态值。

然后在控制台中，我得到了这个错误

我该如何解决？如果我不使用模块化商店并将所有内容放在一个商店中，那么一切正常。但我想要模块化商店。

你好，SO朋友们，

我在我的一个 Vue 组件中引用 Vuex 存储模块时遇到问题。如果我将代码从 authentication.module.ts 移动到 store.ts，我可以让 State 和 Mutations 正常工作，但是在尝试使用模块来获得更清晰的代码时，我似乎无法引用该模块. 我得到一个错误：

[vuex] 在 mapState() 中找不到模块命名空间：@/_Store/_Modules/authentication.module/

我已将 namespaced:true 添加到模块中，所以我很困惑我还缺少什么？

Store.ts

authentication.module.ts
更新：添加命名空间：'Authentication' - 问题仍然存在

Home.Vue（加载时出现错误，因为假设要渲染 State 属性）

Main.ts
*更新：添加了 Main.ts 文件以供参考