问题标签 [vuex4]

我使用vuejs 的第 3 版。我正在尝试将登录用户名保存在我的 Login.vue 中。

作为第一步，我尝试使用名称“myString”保存输入字段的内容。

不幸的是，我收到错误消息：“[Vue 警告]：在渲染期间访问了属性“myString”，但未在实例上定义。”。

我究竟做错了什么 ？

// Login.vue（焦点部分）

// main.js

//应用程序.vue

我目前在 Storybook 中与 Vuex 作斗争。const store = useStore()我在setup函数中使用它。

但是我没有找到将自定义存储注入组件的方法。

我当然可以在故事书preview.js配置文件中全局注入一个商店，如下所示：

有没有办法为使用组合 API（useStore() 到 Vuex）的组件故事创建自定义商店？

改变数组表示的状态的正确模式是什么？

在 Vuex 4 的标准示例中： VUEX4 GitHub 示例1

建议删除一个数组元素并插入一个新元素。

这是为 Vuex 4、Vue 3 更改存储数组的标准模式吗？

另一个直接修改数组中的对象字段的例子： VUEX4 GitHub example2

在 Vuex 4 中改变状态数组而不失去反应性的正确方法是什么？是否可以通过索引直接修改数组的项目，例如 example2？VUEX4 是否具有反应性 - 或者反应性是唯一组件的属性？

我使用 Vue 3 cli 为 store 和 router 安装了新的测试场来学习这些。

项目是这样的：

主.js：

store.js（只是添加了测试计数）：

并在视图中： Home.vue：

根据我所阅读的所有内容，我应该能够通过以下方式访问组件中的存储：

但我得到的商店没有定义。虽然它被不经意地导入并在带有 index.js 的主应用程序中使用：

我花了几个小时在这上面，请指教。这是开箱即用的 cli 安装，我不明白他们不会让我做什么......

我大约一个月学习Vue。这可能是一个愚蠢的问题，但我真的很困惑。

我正在创建一个具有五个状态和“组件是”的 cs livechat 应用程序。欢迎 -> 身份 -> 等待队列 -> 聊天 -> 结束。

用户进度存储在 Vuex 中。通过侦听当前活动组件触发的“下一个”事件来更改状态。

但是，当我创建三个不同的浏览器窗口（包括隐身）时，事情变得很奇怪。我已经打开了第一个实例，直到它处于等待状态。然后，我对其他两个实例做同样的事情。当我检查第一个时，它突然处于结束状态，第二个处于聊天状态。我试图检查它的历史，发现前两个 vue 实例监听另一个触发的下一个事件。我是这样想的，因为触发事件的时间间隔很宽。

我哪里错了？它在一个选项卡中运行良好。

附加信息：我已经尝试过开发和生产构建，但结果仍然相同。

应用程序.vue

store.js

ChatWait.vue

注意：当组件更改时，它不会记录“我来自聊天等待”

我正在使用 Vue3 组合 API。我有一个需要与商店同步的输入字段，以防商店中的数据发生变化，它应该被更新

代码

请注意，我不希望与 store 进行两种方式绑定，如果 store 值已更新，我希望我的响应属性更新

我如何实现这一目标？

我的 Vue 应用程序使用 Vuex 商店。有时用户可以“重置”会话。这需要将 vuex 存储重置为默认值，因此任何挂起的异步操作都应该被删除，因为 Vuex 存储已被重置。问题是当异步调用返回时，它们会尝试修改存储，但它已被重置。当用户点击“重置”时，如何强制忽略任何挂起的异步操作。

我想回顾一下“createStore”Vuex 函数，但这会导致死胡同，因为全局存储变量已更新。

编辑：我最终传递了一个带有每个突变的 StoreID。我将这个 StoreID 值存储在所有异步操作开头的变量中。突变验证何时调用商店当前处于相同的 StoreID 版本。有没有更聪明的方法来做到这一点？

有没有办法清除所有 Vuex 4 状态？

代码来自store.ts：

我很难理解 Veux 4 的createStore()工作原理。

在/store/index.js我有（除其他几件事之外）：

}

在client-entry.js我通过商店时makeApp()喜欢这样：

main.js默认方法是这样做的：

因此，没有store从任何地方导出的内容，这意味着我无法导入像我这样store的另一个.js文件vue-router并访问gettersordispatch操作。

为了完成这项工作，我在文件中执行了以下操作vue-router.js，但我不明白它为什么有效：

Veux 的createStore()方法是每次都创建一个新的商店，还是对在 中创建的同一个商店的引用client-entry.js？看起来是后者，这是否意味着应用程序无论运行多少次都只有一个商店createStore()？那么，为什么运行createStore()不会覆盖现有存储并使用空白值对其进行初始化？

我正在使用 TypeScript 和 Vuex4 开发 Vue 3 项目。现在，我正在使用带有 TS 的 vuex 中的每个商店模块使用样板声明方法。看起来像这样：或者如果我的代码可读性不够，这是我用来指导我的：https ://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230

现在正如你所见，这让我重复了很多很多东西，但是在 Vuex 5 之前我不知道是否还有其他更好的解决方案。我对 TypeScript 也很陌生，我只是使用这个样板作为模板来让我的商店打字。

我的主要问题是：

1. 我如何访问特定模块中的其他模块的 getter 或动作或突变，如果我能让 RootGetters 和 RootActions 工作，我什至会很高兴，但我尝试过，但我无法让它工作，但正如我提到的那样，我是一个新的对此，所以也许我不知道更好。或者我导入这个导出的 const store: Module<State, RootState> ... 就那么容易，这会使我的代码变得笨拙，因为当我想使用来自 4 个不同模块的 getter 时，我需要导入所有 4 个模块？
2. 我怎样才能使这些模块命名空间，我有一些相当大的商店，谈论像 500 行和很多东西，所以没有名字冲突会很好吗？也许这会使它们更容易在其他模块中使用？

即使您无法提供完整的答案，我也很乐意尝试你们提出的每一个建议，因为我很迷茫。

**更新：**您可以看到关于如何使用 allAction|MutationTypes 的公认答案，只需导入它而不是子模块特定的 Action|MutationTypes 并在调用调度或提交时使用它。

至于名称间距，这仍然是一个开放式主题，请随时分享。

由于答案不包括吸气剂，经过反复试验，我最终这样做了：