如何在 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);

    },

})

仪表板.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）。如果有一天这种机制发生了变化，请随时与我联系或在此处添加您自己的答案。