问题标签 [vuex4]

我正在使用 Nuxt 2、Vue 2、Vuex 3、Vuetify 2、vuex-persistedstate 4 和 nuxt-i18n 6。

我将此插件设置为保留包含RTL 状态和语言代码的 Vuex 状态：

plugins/persistedState.client.js：

另外，我编写了一些突变来将此设置保存在状态中并将主题应用于 vuetify：

store/app/index.js：

• 通过调用setLangCode突变，语言将被设置为给定的语言并将其保存在状态中
• 通过调用setRTLvuetify 的 rtl 方向将正确设置并将其保存在状态

问题是页面重载时 vuex-persistedstate 会从本地存储中恢复 vuex 状态，但设置 vuetify 设置的 mutaion 不会被调用，因此 vuetify 将保持在磨损方向。

此外，nuxt-i18n 将检测来自 url而不是来自状态的语言代码，并以此为基础翻译页面。

所以，我尝试用相同的值更改初始状态并且观察者不执行，如果值不同，那么它会按预期工作。

状态：

//对于每个状态我都有一个getter和一个setter(mutation)

在上面的组件中，当 itemPerPage 值更改时，我通过将 activePage 设置为 1 来重置分页。在另一个组件中，我有一个观察者，它根据 activePage 从服务器检索数据：

它不是这样工作的，但是如果我将 activePage 的初始状态更改为 2，那么它就可以工作，所以我在想，也许有办法强制这样做？

我用 Typescript 创建了一个新的 VueJS 3 项目。此外，我添加了 Vuex 4 作为我的商店。但是我无法弄清楚将商店导入到我的 Vue 组件中我做错了什么。

目前，我在浏览器的控制台中收到错误： 未捕获（承诺中）TypeError：无法读取 null 的属性“parentNode”

我必须如何导入我的商店才能在我的组件中使用它？

我有一个使用 Vue 3 和 Vuex 的项目。这是我第一次使用 Vue 3。我似乎无法在 Vue 3 项目的 Setup 方法中了解如何访问 Vuex。

我有一个特征对象。这是由 Childcomponent 使用 featureSelected 方法设置的。首先，在我的设置中，我使用 useStore 创建了一个存储常量；从 import { useStore } from "vuex";. 然后在 featureSelected 函数中，我在这个 store 对象上调用 dispatch 函数store.dispatch("setPlot", { geometry: newFeature });。

我不断收到一个错误消息，告诉我 store 对象上不存在 dispatch 函数：Uncaught TypeError: store.dispatch is not a function。

我正在使用 Vue 3、Vuex 4 和 TypeScript。我有以下型号：

我的 Vuex 商店有以下状态模式：

我有一个Cart组件，我在其中迭代cart.items并呈现 CartItem 组件，如下所示：

现在，在CartItem组件中，我需要访问返回的单个的计算或获取器。我可以在 CartItem.vue 文件中定义一个计算属性，但这不能重用。这是我需要的许多计算/获取器之一。totalPriceCartItemquantity * price

起初我尝试将 TypeScript getter 添加到我的CartItem模型中，如下所示：

但是当我这样做时它没有返回任何值：

它是未定义的。我试图将它从 getter 更改为方法。我尝试从组件中的计算属性调用它。还没有运气！

似乎我应该使用 Vuex getter，但问题是，我怎样才能获得每个CartItems 的 totalPrice？

我有一个Product.vue显示产品信息的组件。每当ProductID路径中的 随存储在 中的数据发生变化时，它都会更新vuex。它是这样完成的：

当我使用上面的代码并转到类似的路线localhost:8080/product/123时， 的值为const Product空，然后在一瞬间它将具有正确的产品数据。如果我再去另一条路线之类localhost:8080/product/545的， 的值const Product将是123更新之前的旧产品数据545。这可能是预期的行为，但它会扰乱 SSR 应用程序，这些应用程序会将旧数据作为 HTML 返回给浏览器。

然后我遇到了解决问题的vuex subscribe功能。但我不明白为什么或如何与computed吸气剂不同。这是代码所需的唯一更改：

现在，商店总是在页面呈现之前填充新的产品数据，并且 SSR 也获得了正确的更新数据。为什么这对计算属性更好/不同？

我有一个 Vuex 商店，它被分成多个模块。这些模块中的每一个都有自己的状态。

我似乎无法让这个工作我总是收到一个错误说明Uncaught (in promise) TypeError: Cannot read property 'state' of undefined。我不知道我做错了什么。

这是我的 Vue 商店的 index.js：

这是我试图访问的模块：

在这里，我尝试访问正在定义的状态：

我的 main.js。plugins.js 只是一个加载我的 css 文件的文件。

我使用 Quasar 框架（vue 3）在我的路由器中得到了这个带有嵌套路由的结构：

我知道我可以在我的孩子中使用 $emit 像这样传递给父母：

我的孩子：

我的父母：

但是我想在父级中触发一个事件而不在父级中再次呈现 MyChild ，因为它已经通过路由器显示......所以我正在寻找一种更直接地访问父级方法的方法。

在 vue 3 中这样做的正确实现是什么？

更新：

我在孩子中更新 vuex 的方法：

Store.js

实际上，我最终在我父母的吸气剂上得到了一个观察者：

I am using Vue3/Vuex 4/TypeScript.

I am trying to access my typed store from within my component (App.vue).

Whenever I set const store = useStore(), store will always return as undefined

As far as I can tell, I've followed the official Vuex 4 TypeScript Support Documentation verbatim.

app.ts

store.ts

App.vue

store is always returning as undefined, here's my console messages from FireFox

I've tried to debug this all day but really can't narrow in on the problem. Any help/guidance is greatly appreciated.

我一直在寻找解决方法以在我的 Vuex 突变/操作上使用任何 http 客户端

我正在将 Vuex4 与 Vue3 和 Typescript 一起使用，这是我迄今为止尝试过的

src/plugins/http.ts

src/main.ts

然后尝试在突变或操作中从全局 this 访问 $http，但看起来无法从商店中检索 Vue 实例

另一个解决方法是在src/main.ts

Typescript 对不准备获取 $app 的 Store 界面不满意，也许有办法覆盖这种类型？

最后一个正在工作，但我不太喜欢这种用法。这个想法是向您的有效负载添加一个参数，该参数采用调用调度的当前 Vue 实例。看起来有点像这样

然后像这样在突变中使用它

如果你们知道另一种使用 Vuex 商店中的全局属性的方法，我会全力以赴！感谢阅读，希望有人可以帮助我！