Как сослаться на текущее состояние Vuex и связанный Vue экземпляр (this) внутри события javascript? - PullRequest
Новая
       17

Как сослаться на текущее состояние Vuex и связанный Vue экземпляр (this) внутри события javascript?

0 голосов
/ 23 марта 2020

Я работаю с Vuex и vuejs. В настоящее время у меня есть 2 vue экземпляров (я знаю, что это плохо, но я не могу поступить иначе, это не вопрос)

Боковая панель. 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
        });
    },
})

SearchMo store store: 

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, а не ссылку на него, поэтому каждый раз, когда будет вызываться моя функция grid.on, ссылка «that», указывающая на сохраненный экземпляр Vue, будет одинаковой (сохраненный one).

Итак, мой вопрос: как заставить мою функцию grid.on получать правильный экземпляр vue с изменением связанного хранилища? И как сделать так, чтобы один и тот же магазин Vuex совместно использовал информацию в этих двух файлах?

Редактировать: Когда я проверяю с помощью инструмента Vue dev, На вкладке компонентов во втором vue, мой массив miniWidgets пуст, а мой первый vue заполнен правильно. Если я иду на вкладку VueX, я вижу, что объект состояния заполнен правильно ... Почему мое хранилище vuex во втором экземпляре vue неверно?

Редактировать 2 Это работает, когда 2 vue экземпляров находятся в одном файле, но не тогда, когда они находятся в двух разных файлах, а затем импортируются в один файл. Вы знаете, как это исправить, но сохраняя эти 2 файла?

1 Ответ

0 голосов
/ 24 марта 2020

То, что я пытаюсь сделать, это просто на данный момент невозможно .

Я обнаружил ту же проблему, что и у меня здесь .

Решение 1:

Вам необходимо сгенерировать хранилище один раз, например, здесь на боковой панели. js, а затем экспортировать этот экземпляр или передать его в качестве переменной аргумента для второго. Появится сообщение, если вам нужно, чтобы 2 магазина разделили один и тот же экземпляр одним способом. В моем случае мне нужно, чтобы это работало двумя способами.

Решение 2:

Итак, единственное решение - это не реальное решение, а создание файла с файлами Sidebar. js и Dashboard. js. Все в одной области, и это нормально.

Объяснение:

Если вы выполняете оба файла (боковая панель. js и панель инструментов. js) по отдельности в другом процессе, то это всегда даст вам новый экземпляр (магазин / vue). Но если вы выполняете оба файла из одного родительского файла (одного процесса), то он всегда будет давать вам один и тот же экземпляр (store / vue) из-за механизма кэширования модулей.

Если однажды этот механизм будет меняется, пожалуйста, не стесняйтесь связаться со мной или добавить свой ответ здесь.

...