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

Question

我正在使用 vuex 和 vuejs。我目前有 2 个 vue 实例（我知道这很糟糕，但我不能这样做，这不是问题）

Sidebar.js vue 定义：

//VUEX stores
import { dashboardStore } from './../../js/Stores/DefinitionMappingStores/VuexStoreForDashboardPage'

//first vue with initialisation of state
var vmSidebar = new Vue({
    el: '#sidebar-content',
    store: dashboardStore,
    created() {
        this.$store.dispatch('search/setMiniWidgets', miniwidgetsfromjson);
    },
})

Dashboard.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
        });
    },
})

SearchModule 商店：

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)
            }
        }
    },
}
export default searchModule;

VuexStoreForDashboardPage.js :

import searchModule from './../SearchModuleStore.js'
import userTutorialModule from './../UserTutorialModuleStore.js'

//VUEX stores
export const dashboardStore = new Vuex.Store({
    modules: {
        //a lot of others modules
        search: searchModule,
    },
})

我认为我的问题是我保存了 Vue 实例的 "state"，而不是对它的引用，所以每次调用我的 grid.on 函数时，"that"指向保存的 Vue 实例的引用将是相同的（保存的那个）。

所以我的问题是：如何让我的 grid.on 函数获得正确的 vue 实例以及关联商店的更改？以及如何让相同的 Vuex 存储在这 2 个文件中一起共享信息？

编辑： 当我使用 Vue 开发工具进行检查时，在组件选项卡中，在我的第二个 vue 实例中，我的 miniWidgets 数组是空的，而我的第一个 vue 实例是正确的填充。如果我要转到 VueX 选项卡，我会看到状态对象已正确填充...为什么我的第二个 vue 实例中的 vuex 存储是错误的？

编辑 2 当 2 个 vue 实例在同一个文件中时它工作，但当它们在 2 个不同的文件中然后导入到一个文件中时则不起作用。您知道如何在保留这 2 个文件的情况下更正该错误吗？

Answer 1

我想做的只是目前不可能。

我发现了和我一样的问题here。

解决方案 1：

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

解决方案 2：

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

解释：

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

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

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

How to reference current Vuex State and related Vue instance (this) inside javascript event?

javascript

vue.js

vuex

vuex-modules

解决方案 1：

解决方案 2：