Question

我正在使用前端的Vuex和Nuxt.js一起开发复杂的状态同步系统。我的客户将数据更改实时流式传输到我的服务器。然后，服务器将这些操作写入数据库，并将更新分发给其他客户端。问题是，当客户端意外断开连接时，它无法发送必要的操作来释放对某些资源已采取的编辑锁定。这些锁的存在是为了防止同时编辑同一文本字段。

我的想法是在服务器中实例化Vuex存储，以模拟断开连接的客户端并通过释放其持有的锁来清理未完成的业务。

我的问题是，如何实例化Nuxt为客户端生成的Vuex存储？我知道如何创建通用Vuex存储，但是我需要客户端使用的存储类型完全相同。 Nuxt通过查看store目录中的文件来生成存储，并为每个文件注册一个命名空间的Vuex模块。是否可以为我自己使用此内置功能？我只读过的Nuxt文档解释了如何为Nuxt提供模块来构建商店，而不是如何使用Nuxt 为自己创建商店。

这是一些示例代码。这是store/index.js

中的根存储模块

export const state = () => ({
  globalCounter: 0
})

export const mutations = {
  incrementGlobal(state) {
    state.globalCounter++
  }
}

这是文件store/module.js

中的存储模块

export const state = () => ({
  moduleCounter: 0
})

export const mutations = {
  incrementModule(state) {
    state.moduleCounter++
  }
}

在客户端Vue组件中，我可以像这样使用商店：

this.$store.commit("module/incrementModule")

我想在服务器上做的事情基本上是相同的，只是我显然需要以某种方式访问商店实例或创建一个商店实例。如果检测到store/index.js，Nuxt会自动为客户端执行此操作。

import Vuex from "vuex"

//the complete store structure the store a client gets contains
import storeInfo from "????"

//make a new local store, or import the store from somewhere? this is the question
const localServerStore = Vuex.Store(storeInfo)

//or maybe something like this?
import localServerStore from "????"

//use of the store
localServerStore.commit("module/incrementModule")

在服务器上创建的商店还应包含插件，而客户端中的商店也应包含其他内容。服务器可能需要经常创建一个新存储，以解决突然断开的问题。另外，它也可以使用store.replaceState来执行此操作，而无需每次都创建新商店。

如何在Nuxt.js中手动实例化Vuex存储？

0 个答案: