title: How to reference current Vuex State and related Vue instance (this) inside javascript event?
body: <p>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)</p>
  
  <p>Sidebar.js vue definition :</p>
  
  <pre><code>//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);
      },
  })
  </code></pre>
  
  <p>Dashboard.js :</p>
  
  <pre><code>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
          });
      },
  })
  </code></pre>
  
  <p>SearchModule store :</p>
  
  <pre><code>const searchModule = {
      namespaced: true,
      state: {
          miniWidgets: []
      },
      getters: {
          getFilteredMiniWidgetsById: (state) =&gt; (id) =&gt; {
              if (id == undefined || id == null || id == "") {
                  return null;
              } else {
                  return state.miniWidgets.find(miniWidget =&gt; miniWidget.Id === id)
              }
          }
      },
  }
  export default searchModule;
  </code></pre>
  
  <p>VuexStoreForDashboardPage.js : </p>
  
  <pre><code>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,
      },
  })
  </code></pre>
  
  <p>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).</p>
  
  <p>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 ?</p>
  
  <p><strong>Edit :</strong> 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 ?</p>
  
  <p><strong>Edit 2</strong> 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 ?</p>