How can I integrate Vuex into a Storyblok plugin?

Question

I'm building a plugin for storyblok with vue. I decided it would be easier to add state management to the plugin rather than an echo chamber of $emit() all the way back up the component tree. I installed Vuex into my plugin and went to add it to the main.js file as instructed in a Vuex tutorial however my main.js file isn't set up like a regular Vue app's main.js file.

The tutorial tells us to do this

import Vue from 'vue'
import App from './App.vue'
import store from './store' //our Vuex store

Vue.config.productionTip = false

new Vue({
    store, //passing in our store
    render: h =>(App)
}).$mount('#app')

However my main.js file due to being a storyblok plugin looks like this

import Plugin from './Plugin.vue'
import store from './store'  //I have no clue where to put this in the code below :(

if (process.env.NODE_ENV == 'development') {

  window.Fieldtype = Plugin
  let customComp = window.Storyblok.vue.extend(window.Fieldtype);
  window.Storyblok.vue.component('custom-plugin', customComp);
  window.StoryblokPluginRegistered = true;

} else {
  
  let init = Plugin.methods.initWith() 
  window.storyblok.field_types[init.plugin] = Plugin

}

As you can see the setup is totally different as it's geared towards injecting a Vue component into storyblok as a plugin rather than setting up a new Vue app. Does anybody know what I should do here?

Answer 1

I solve that issue adding in the main.js this line: window.Storyblok.vue.$store = store;

Then in your plugin when you call the store use the same. For example: window.Storyblok.vue.$store.commit()