0๐
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()
0๐
So I am still learning StoryBlok and their plugin development, so please yell at me if this is wrong.
I was able to solve this like so.
Just for some context this is my general folder structure.
.
โโโ my-app/
โโโ node_module/
โ โโโ ...
โโโ public/
โ โโโ index.html
โโโ src/
โโโ store/
โ โโโ state.js
โ โโโ config.js
โโโ main.js
โโโ Plugin.vue
main.js
import Vuex from 'vuex'
window.Storyblok.vue.use(Vuex); // This has to come before the Plugin import
import Plugin from './Plugin.vue'
if (process.env.NODE_ENV == 'development') {
window.Fieldtype = Plugin
let customComp = window.Storyblok.vue.extend(window.Fieldtype);
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
}
Plugin.vue
import Vuex from 'vuex';
import State from './store/state';
const store = new Vuex.Store(State);
export default {
name: 'my-vue-plugin',
mixins: [window.Storyblok.plugin],
store: store,
components: {},
data() {
return {}
},
};
state.js
import Config from './config';
export default {
modules: {
Config
},
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
};
Then anywhere in your nested components or whatever you can call the increment
mutation like so this.$store.commit('increment');
Source:stackexchange.com