问题标签 [vuex4]

我正在使用来自 Vuex 4 的 Vue 3 组合 API 和 useStore 挂钩

这就是我从 setup() 内的 vuex 存储中获取数据（id）的方式

问题是我无法使用allIds数组，因为它包含在代理中。这就是我在 console.log(allIds.value) 上得到的 -

当我在模板中使用此数组时，它工作正常，但我想将此数据用作组件内部另一个动作调度的有效负载，使用数组中的 1 个 id。我怎样才能做到这一点？我发现的所有示例都是在模板中使用商店数据。

谢谢。

我搜索了文档，但在任何地方都找不到如何将 Vue 合并到 4.0 版中的 vuex 商店

我目前使用的是vue 3和vuex 4.0，应用从这里开始，是这样的。

我需要 set 函数来更新这个突变方法中存储的对象数组中的对象属性：

我希望找到一些方法在这个版本的 vuex 中使用它，或者找到一种不同的方法。

我有一个 Vue 3 应用程序（没有 TypeScript），并且我使用的是 Vuex 4 商店。

我将商店分成代表一些常见主题的模块，例如，我有一个user模块，其中包含适合与用户打交道的商店、getter、动作等。但是，我的所有模块中也有一些共同的功能，这是一个明显的地方，我可以简化我的模块并将它们精简一点。

例如，假设我有一个通用的set()mutator，如下所示：

这将简单地接收一个有效负载并填充有效负载'key'字段所属的任何存储对象，当我想在我的商店中简单地设置一个字段时它工作得很好。现在，问题是这个set()函数在我拥有的每个存储模块中都重复，因为它只是一个通用的存储突变，一旦我达到的模块数量增加了一点，你可以想象包含它是非常浪费和毫无意义的每次都有这种突变。

但是，我不确定如何实现这一点。

我当前的主存储文件如下所示（为了问题而简化）：

我所有的模块都以相同的方式实现：

然后在组件中的某个地方或任何我需要的特定模块操作/突变/存储的地方调用以下内容：

对我来说，将共享功能带到一个单一的地方的最佳方式是什么？例如，如果我想同时正确地set改变商店，module1我将如何正确使用它？module2我不确定的部分是我如何准确地调用通用突变并让它针对所需模块的状态

我正在尝试让 vuelidate 与 vuex 一起工作。

无论如何要正确完成这项工作吗？它看起来像 ref 和响应式组合 api 工作，但不是 vuex 存储。

不幸的是 Vue 扩展按原样v$.$model显示null。但是，当我输入某些内容时，它实际上会启动突变并保存值，但 vuelidate 似乎无法识别它。

我正在尝试按照官方 Vee-Validate 指南构建一个多步骤表单向导，它提供的示例可在此处找到。虽然这很有帮助，但我想将 Vuex 合并到其中，并且我使用自定义组件而不是 Vee-Validate 的默认组件<Form/>和<ErrorMessage/>组件。自定义组件内部不使用 Vee-Validate 默认组件。

然而，这样做给我带来了一些问题。我目前的问题是我不知道如何让我的 Vuex 状态进入 Vee-Validate reactively。

我的主要组件中的文本输入是这样使用的：

这一切都是根据Vuex 在此处提供的双向计算属性指南。

现在我正在尝试将这些字段合并到前面链接的 Vee-Validate 多表单向导中。我基本上已经将其更改为在重置并从 Vuex 来回而不是本地值时获取值。像这样：

FormStep.vue步骤完全相同。当我像这样使用 FormWizard 时：

在我的主要组件中有一个setup()像这样容纳 FormWizard 的组件：

事情是现在我要进入下一页，我收到一个需要名称的验证错误。这是因为没有使用 Vee-Validate 的useField()功能来容纳我的字段。useField()返回一个计算属性，您必须将其链接为v-model您的输入。这里出现的问题是我在使用 时无法更改 Vuex 字段useField()，也无法更改useFieldwith Vuex 的计算属性，因为这不是 Vee-Validate 中的选项。

现在我的问题是：如何实现 Vee-validate 3 和 Vuex 4，以允许useForm()仅使用一个计算属性更新我的 Vuex 存储和 Vee-Validate 字段？

或者有不同的方法吗？

我正在使用 Vuex 4 学习 Vue 3，我被一些我很确定它很简单但我看不到的东西困住了。

简而言之，我正在尝试设置一些数据state以使其可用于我的组件中，但它不起作用。

让我给你看一下代码：

/// store.js

/// 我的组件.vue

/// main.js

当然，{{ users }}和{{ productsTest }}绑定不显示任何数据以及console.logs。

PD：我试图直接在我的组件中获取数据并且它正在工作，因此它与从 API 获取的数据无关。

尝试访问 Quasar V2 beta 应用程序 Veux 4 商店中的 getter 函数时出现编译错误。

任何值上的不安全成员访问 ['item/getRandomNumber'].eslint@typescript-eslint/no-unsafe-member-access

即使禁用它也不会出现错误。请说明错误的原因以及如何解决。

模块项下的getter.ts

模块项下的 index.ts

存储/索引.ts

我正在学习 Vuex，最近我使用它来获取数据。

一切似乎都正常，我可以访问我的电影对象，我可以选择这个对象中的任何电影......但是一旦我想访问其中一个电影中包含的数据，一条错误消息就会唤醒我的控制台。

Vuex：

*services_movieDB 是一个使用 Axios 获取数据的服务。为了清楚这个问题，我将省略这部分：它可以工作。

零件：

警告：

错误：

这真的是一个 Vue 内部错误吗？一些机构有解决方案？ VueJS 3 | Vuex 4

我将日期存储在 Vuex 商店（日期）

它可以在 Vuejs（实际上是 Quasar 2 beta 12）模板 {{ date }} 中读取。

如果我更改（更改）商店中的日期，{{ date }} 会更改。好的。

但我也想在日期上运行一些代码，将其与另一个日期（dateSet）进行比较。所以我做了 ...

然后一个方法将运行 dateVal 和 dataSet 的比较。

唯一的事情是，如果我更改（变异）$store.state.date它会在 {{ date }} 中更改，但不会在dateVal中更改。不好。

我在这里遗漏了一个技巧，但我确实在互联网上环顾四周。非常感谢您的建议。

干杯。

我是 Vue 的新手，我遇到了一个错误，不明白为什么以及如何解决这个问题。我得到的控制台中的错误是：无法读取未定义的属性“状态”

我正在使用 vue 版本@vue/cli 4.5.12

这是我拥有的文件：

main.js

store.js

主页.vue

有人可以告诉我为什么会收到此错误以及如何解决此错误吗？