问题标签 [vuex4]

我有一些相互依赖的 Vuex 属性，我想知道用它们进行计算的最佳方法。

例如，

我fontSize在我的州有一处房产，价值为 16。

现在我还想要一个 lineHeight，它是通过将 fontSize 乘以1.4.

所以我可以在我的吸气剂中说，例如：

这是正确的做事方式还是我应该使用 Mixins/新的 Vue3 组合 API 而不是 Vuex 来进行这些类型的计算？

我正在将组件从常规 Vue 3 组合 API 重构为脚本设置语法。初始点：

当前的Vue v3 迁移文档，SFC Composition API Syntax Sugar (<script setup>)，链接到这个 RFC 页面：https ://github.com/vuejs/rfcs/pull/182

只有一个使用计算反应属性的例子：

由于没有提到当前可用的 Vuex 4 文档，<scrip setup>我仍然不清楚mapGetters在使用这种语法时应该如何使用？或者使用 Vuex 4 解决这个问题的正确方法是什么？

在撰写本文时，Vue 3.0 已经发布了它的第一个稳定的v3.0.0 'One Piece' 版本，而 Vuex 4 位于v4.0.0-beta.4中。

不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......

作为进一步的要求，我希望将模块状态、突变、getter 和操作存储在它们自己的文件中。当这些模块增长时，这使得管理代码变得更容易。

我设法在Github和Codesandbox中拼凑出一个工作示例存储库。

通过使用这些资源中提供的示例：

• Andrew 在 Dev.to 中的 Vuex + TypeScript
• 要点 javisperez/index.ts
• 回购 andrewvasilchuk/vuex-typescript
• Vue 3 和 Vuex 4：Barylski 在 Dev.to 中可组合的 useStoreModule
• LogRocket 的 Vuex 映射完整指南

但是，仍有一些怪癖有待解决：

1. 解决依赖循环 linting 错误

目前，模块的index.ts、actions.ts和getters.ts中的类型依赖于RootState从主商店导入。

当使用ESLint Airbnb linting config时，我遇到了类似的 linting 错误（目前被// eslint-disable-next-linerepo 和示例中的规则禁用）：

Dependency cycle via @/store/modules/profile > eslint(import/no-cycle)

虽然这似乎不会影响商店的实际运作（或者会影响吗？），但我想知道如何在不需要关闭规则或需要// eslint-disable-next-line import/no-cycle在这些线路上使用的情况下克服这个问题？

如果标准和更漂亮的 linter 配置发生这种情况，我还没有尝试过，还是与 Airbnb 规则有关？

2. 如何有一个没有任何动作的模块？

我试图在不使用任何操作的情况下配置配置文件模块，但是我无法获得类型权限。

目前，示例代码包括一种 NON_ACTION 动作类型...

3. 如何正确使用namespaced: true模块选项，以及它如何影响组件中的使用语法？

当前配置文件存储配置为namespaced: true. 在 App.vue 中，我使用 mapGetters 来演示它，它以模块名称作为第一个参数。这行得通。

但是，documents 模块没有这个选项，因为使用 action 类型的 dispatch 不再起作用。它似乎需要与我找不到的其他一些语法变体一起使用。

PS。任何进一步的代码改进建议都非常欢迎作为评论、答案和拉取请求！

2020 年 9 月 27 日更新：useStore当在组件内部使用时，我刚刚意识到 VS Code 智能感知在从函数传递存储实例后没有显示存储实例的类型信息。如果在.ts文件中导入，则可以使用。

我正在开发我的第一个 Vue 3（以及 vuex 4）应用程序，它来自一个非常扎实的 Vue 2 背景。

我有一个组件通过 vuex 操作加载数据，然后通过返回值访问存储setup()

fancy这是一个深度嵌套的对象，我认为这可能很重要。

然后我想根据值的变化来运行一个函数，所以我watch在我的mounted()生命周期钩子中设置了一个

我尝试onMounted()在 setup 中使用新的钩子watchEffect，store.watch但是我无法让 watch/watchEffect 在 onMounted 钩子中可靠地触发，并且 watchEffect 似乎永远不会根据我计算的存储值进行更新。如果您对此有所了解，那将很方便。

不过，我真正的问题是，我的观察者似乎在值更新之前被调用。例如，我的代码[]为第一组键注销，然后半秒后一个完整的数组。如果是某种渐进式的数据填充，那么我预计会再次调用观察者，并使用新的newValue. 我也试过了。flush,deep和的所有排列都immediate对我的观察者无济于事。nextTick()s 也没有工作。我认为这一定与我对新的反应性变化缺乏了解有关，但我不确定如何解决它，并且在我的应用程序中添加随机延迟似乎显然是错误的。

谢谢你。

找不到任何东西来解决这个看似显而易见的问题。

刚刚从 Vue 2 升级到 Vue 3 和带有 Typescript 的 Vuex。

this.$store 似乎无法访问，尽管遵循了 Vue 3 说明。

src/components/FlashMessages.vue:28:25 TS2339 中的错误：类型“ComponentPublicInstance<{}、{}、{}、{ getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }，{}，ComponentOptionsMixin，ComponentOptionsMixin，EmitsOptions，字符串，{}>>'。

main.ts

store.ts

FlashMessages.vue

初始化.ts

任何智慧都值得赞赏:)

文件结构

这是我第一次正确使用 eslint，所以我不确定我是否设置正确。我最终在 /client 和 /server 目录中使用了不同的 tsconfig。

客户端/tsconfig.json

我是 vueJS 的新手，我正在尝试submenu在“标题”组件中创建动态。

应用程序.vue

我使用 store fromVuex为我的submenu物品设置全局状态

存储/index.js：

我设置了我的 Header 组件：

我检查了 api 调用的有效性，没有任何问题，但仍然blog_sub_menu没有更新。有没有人有任何想法？

干杯!

我刚开始使用 Vue 3，我正在尝试观察商店的状态变化，它是用 Vuex 构建的。

由于某种原因，它没有按预期工作。

在提交表单时，在 vuejs3/vee-validate 4 应用程序中，我尝试使用 vuex 发送请求并失败，因为我无法访问存储对象。我愿意：

在 src/main.js 我有：

所以在控制台我得到了错误：

Uncaught (in promise) TypeError: Cannot read property 'dispatch' of undefined

我在控制台中看到：https ://prnt.sc/vf1gx3

包.json：

src/main.js ：

我正在为 Vue3 尝试新的 Vuex4，并且想知道如何实现通用的 ActionAugment，以便 Mutation 和 MutationTypes 是通用的，并且每个模块都可以使用这种通用类型。

我尝试了以下。请注意 parent.vue 中的注释行，它甚至没有为我提交新状态。但是，也许有人可以指导我为多个组件共享的全局状态找到更好的解决方案？

main.js

父.vue

孩子.vue