问题标签 [vuex-modules]

我正在使用一个带有 Vue、Vuetify、Vue-Router 和 Vuex 的项目。其目的是创建一个带有侧边栏的基本布局，采用更模块化的方法，以涉足 Vue 的可扩展性。所以我创建了一个名为 Store 的文件夹，里面有一个 modules 文件夹。所以我在 store 文件夹中的索引文件如下：

该模块被分解为一个包含动作、getter、突变和状态的文件。

我如下调用 Vue 实例。

但是，当我打电话this.$store.global.state.sidebar或this.$store.state.sidebarVue 无法找到我的财产时。我收到错误：

无法读取未定义的全局属性。

该错误还引用了状态，但我相信由于我使用的是命名空间，因此语法应该反映在上面。我试图称呼它的地方就在这里。

我正在尝试访问我的状态并学习如何正确发射，因此在导航组件中我可以向上发射，以便反映该值以移动侧边栏打开或关闭。

任何帮助都会很棒，我对 Vue 还是很陌生。

我是 vue.js 和 vuex 的新手，我对 mapstate 对象有疑问，首先我的商店中只有一个模块：

state.js：

因此，当我尝试访问 userInfo 对象时，一切正常：

然后我决定创建模块：

所以userInfo在commons.js文件中，现在当我尝试获取对象时，我总是得到undefined：

commons.js

组件.vue

主.js：

你能告诉我如何访问 userInfo 对象吗？

谢谢。

如果我像这样在 vue 组件中使用 ajax：

有用。我成功拿到文件

但在这里我想使用 vuex 商店

我的 vuex 商店模式是这样的：

我像这样更改我的 vue 组件：

在组件vue中，它会调用modules user中的updateProfile方法

像这样的模块用户：

从模块用户，它将调用 api 用户中的 updateProfile 方法

api用户是这样的：

所以我的模式就是这样。所以我正在使用 vuex 商店的模式

我的问题是我仍然对发送文件数据感到困惑

如果我console.log(user)在模块用户的 updateProfile 方法中，结果是undefined

如何使用 vuex 存储发送文件数据？

我正在使用 Vue 构建一个连接到 Laravel 后端的小型聊天应用程序。

初始化聊天应用程序时，会调用后端来获取 JWT，并将其存储在 Vuex 和 localstorage 中。

接下来，要开始对话，我将到达一个在标头中传递不记名令牌的端点。但是，它起初因未经授权而失败，但如果我使用 Postman 用令牌达到那个端点，它就可以工作。

所以这里是故障。首先，一个 Vuex 动作：

Auth.register调用服务

然后是突变

这很好用。

接下来，开始对话

和喜欢的一样Auth，我有Conversation服务

myApi指

就像我说的，起初失败，但几分钟后，成功，假设因为 http 承诺已经完全解决。

我觉得 async/await 在这里会有所帮助，但不完全确定应该去哪里。我还没有完全理解异步/等待，所以任何指针都会很棒。

我的父组件是这样的：

我的子组件是这样的：

我的模块 vuex 在组件之间发送数据，如下所示：

我尝试这样，但它不起作用

如果代码执行，子组件中console.log(this.getCategory)的结果为null

例如父组件中的category prop = 7。子组件中console.log(this.getCategory)的结果是否应该= 7

为什么它不起作用？为什么结果为空？

注意：

我可以通过 prop 发送类别数据。但在这里我不想使用道具。我想通过 vuex 存储发送数据。所以我只想通过 vuex 存储设置和获取数据

我的组件 vue 是这样的：

这段代码：this.addProduct(this.filters)，它将在模块 vuex 中调用 addProduct 方法

我的模块 vuex 是这样的：

此代码：product.add(payload,在模块 vuex 中，它将调用 api

像这样的api：

我的问题是，如果 vue 组件中的 add 方法运行，结果console.log(this.getStatusAddProduct)为 null。如果产品成功添加，则结果console.log(this.getStatusAddProduct)为真

我认为这是因为在运行时console.log(this.getStatusAddProduct)，在 vuex 模块中添加产品的过程尚未完成。所以结果为空

console.log(this.getStatusAddProduct)vuex模块中的进程完成后如何运行？

我有 4 个组件

我的组件首先是这样的：

我的第二个组件是这样的：

我的第三个组件是这样的：

我的第四个组件是这样的：

所以，如果组件中的 update() 首先执行，我想在组件中调用第四个检查方法

我该怎么做？

我有一个带有一些模块的全局状态。

现在我的页面的各个部分都有 vue 组件。

我有一切设置，所以/foo使用foo商店（这有效）。该created方法从 API 加载数据并将其写入存储

现在我有/foo/bar另一个（兄弟）组件，但它需要访问与 相同的商店/foo，但我无法让它工作。

如果我输入/foo/bar/URL，商店里什么都没有。但是如果我切换到/foo，然后再返回/foo/bar，数据就在存储中并且可以正确输出

我试过注册/foo/bar为孩子，这似乎没有效果（实际上它并不是真正的孩子，而只是另一个具有相同数据的页面..）

我也试过

in /foo/bar，但这似乎也不是正确的方法

什么是最佳做法

1. created在任何指定页面集上从 API 加载数据
2. 在任何这些页面上访问所述数据（即共享同一个商店）

我整天都在努力寻找解决方案，但似乎我不明白一些事情。

感谢您的帮助 ：）

编辑

实际上，当我再次阅读我的问题时，我认为我的整个问题是未加载数据（因为created未调用该方法）。我怎样才能确保这发生在使用商店的任何页面上并且只发生一次？我不能只在每个created方法中编写一个 api 调用，可以吗？

我有两个组件

我的第一个组件是这样的：

我的第二个组件是这样的：

两个组件都通过模块 vuex 存储连接

我的模块 vuex 是这样的：

如果我单击 Ok 按钮，它将调用 saveClub 方法。然后它将在模块 vuex 上调用 setClub 方法。然后它将数据存储在本地存储中

我希望当用户更改俱乐部时，它会自动更新。我的代码还不是自动的。当用户更换俱乐部时，不会自动更新

我怎么解决这个问题？

笔记 ：

我想要这个代码：

如果俱乐部发生变化，总是会改变

我正在研究动态数据加载算法，其中有状态变量（VueX）loadState来管理数据的状态，无论是加载/加载完成

有，watch_loadState

这总是相同的值，例如， filters: LOADIN_DONE LOADING_DONE

这是我更新负载状态的突变，

我也参考了：https ://github.com/vuejs/vue/issues/1086

但它不工作。

我不明白我该如何解决。

在加载所有依赖项后，有什么最好的方法来进行等待调用，我们进行某些数据调用。

我知道的方法，

<div v-if="isFilterLoaded"></div>

但在我的电话中，我的依赖关系可以是动态的，它可能来自数据库