CODEWITHSUNDEEP
javascriptvue.jsvuexvuex-modules
Karakayn
Karakayn

Reputation: 159

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

I am working with vuex and vuejs. I have currently 2 vue instances (I know it's bad but I can't do otherwise, it's not the question)

Sidebar.js vue definition :

//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 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,
    },
})

I think my problem is that I save a "state" of the Vue instance, and not a reference to it, so everytime my grid.on function will be called, the "that" reference pointing to the Vue instance saved will be the same (the saved one).

So my question is : How to have my grid.on function getting the correct vue instance with the associated store changing ? And how to have the same Vuex store sharing information together inside those 2 files ?

Edit : When I am inspecting with Vue dev tool, In the components tab, in my second vue instance, my miniWidgets array is empty, and my first vue instance is correctly filled. If I am going to VueX tab, I see the state object correctly populated... Why my vuex store in my second vue instance is wrong then ?

Edit 2 It's working when 2 vue instances are in the same file, but not when they are in 2 differents files and then imported in one file. Do you know how to correct that but with keeping these 2 files ?

Upvotes: 1

Views: 1300

Answers (1)

Karakayn
Karakayn

Reputation: 159

What I am trying to do is just currently impossible.

I found the same issue as me here.

Solution 1 :

You need to generate the store once, for exemple here in Sidebar.js and then export that instance or pass it as an argument variable for the second one. It will word if you need that 2 stores shared the same instance in one way. In my case I need this to be working in two ways.

Solution 2 :

So, the only solution is not a real solution but it's to create a file with both Sidebar.js and Dashboard.js files. All are in the same scope and this is fine.

Explanation :

If you are executing both files(Sidebar.js and Dashboard.js) separately in different process, then it will always give you a new instance(store/vue). But if you are executing both files from one parent file (single process) then, it will always give you same instance(store/vue) due to caching mechanism of modules.

If one day this mechanism is changing, please feel free to contact me or to add your own answer here.

Upvotes: 0

Related Questions