[Vuejs]-How can I integrate Vuex into a Storyblok plugin?

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');

Leave a comment