如何在 javascript 事件中引用当前的 Vuex 状态和相关的 Vue 实例（this）？

Question

我正在使用 vuex 和 vuejs。我目前有 2 个 vue 实例（我知道这很糟糕，但我不能这样做，这不是问题）Sidebar.js vue 定义：//VUEX storesimport { dashboardStore } from './../../js/Stores/DefinitionMappingStores/VuexStoreForDashboardPage'//first vue with initialisation of statevar vmSidebar = new Vue({    el: '#sidebar-content',    store: dashboardStore,    created() {        this.$store.dispatch('search/setMiniWidgets', miniwidgetsfromjson);    },})仪表板.js：import { dashboardStore } from './../../js/Stores/DefinitionMappingStores/VuexStoreForDashboardPage'//second vue where state is empty (array(0) instead of having 20+ items inside)var vm = new Vue({    el: '#dashboard-container',    store: dashboardStore,    mounted: function () {        let that = this; //take this reference, pointing to the current Vue instance        let grid = GridStack.init(options, this.$refs["dashboardref"].$el); //initialise gridstack grid (javascript lib)        grid.on('dropped', function (event, previousWidget, newWidget) { //here is a javascript event)            console.log(this); console.log(that); //here this is the dropped div element / that is the vue instance saved before... but it keep the $store variable not following change...            let vueMiniWidgetComponentFromSidebar = that.$store.getters['search/getFilteredMiniWidgetsById'](idFromNewAddedNode); //here the store search is not initialized but in the other vue from sidebar I see it initialized        });    },})搜索模块商店：const searchModule = {    namespaced: true,    state: {        miniWidgets: []    },    getters: {        getFilteredMiniWidgetsById: (state) => (id) => {            if (id == undefined || id == null || id == "") {                return null;            } else {                return state.miniWidgets.find(miniWidget => miniWidget.Id === id)            }        }    },}我认为我的问题是我保存了 Vue 实例的“状态”，而不是对它的引用，所以每次调用我的 grid.on 函数时，指向保存的 Vue 实例的“那个”引用将是相同的（保存的）。所以我的问题是：如何让我的 grid.on 函数获得正确的 vue 实例并改变相关的商店？以及如何在这两个文件中让相同的 Vuex 存储共享信息？

Answer 1

我正在尝试做的只是目前是不可能的。

我在这里发现了和我一样的问题。

解决方案 1：

您需要生成一次商店，例如在 Sidebar.js 中，然后导出该实例或将其作为第二个实例的参数变量传递。如果您需要 2 个商店以一种方式共享同一个实例，它会告诉您。 就我而言，我需要以两种方式工作。

解决方案 2：

因此，唯一的解决方案不是真正的解决方案，而是创建一个包含 Sidebar.js 和 Dashboard.js 文件的文件。所有都在同一个范围内，这很好。

解释 ：

如果你在不同的进程中分别执行两个文件（Sidebar.js 和 Dashboard.js），那么它总是会给你一个新的实例（store/vue）。但是，如果您从一个父文件（单个进程）执行两个文件，那么由于模块的缓存机制，它将始终为您提供相同的实例（存储/vue）。

如果有一天这种机制发生了变化，请随时与我联系或在此处添加您自己的答案。