Vuex store in Component Library

Question

I am building a component library and some of my components require awareness of Vuex store. Let’s take an example of Textbox component within my component library. When the component mounts I can see that “this.$store” is populated. But when I make updates to the store in the main application, the changes are not reflected in the Textbox component in the component library. I am writing the component in Typescript using “vue-property-decorator”. Here are some code snippets of how the store is being passed to the library

main.ts (component library)

import * as components from './components'

const ComponentLibrary = {
  install(Vue, options) {
    if (!options || !options.store) {
      throw new Error('Please initialise plugin with a Vuex store.')
    }
    
    // components
    for (const componentName in components) {
      const component = components[componentName]
      Vue.component(component.name, component)
    }
  }
}

export default ComponentLibrary

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(ComponentLibrary)
}

main.ts (main project)

import store from './store/store';
import ComponentLib from 'component-library/src/main';

Vue.use(ComponentLib, { store });

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

store.ts (main project)

import Vue from 'vue';
import Vuex from 'vuex';
import modules from './modules';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: modules,
});

Modules contains each of the individual store files /* Common.store.ts */

const state = {
    mode: [], //Default mode 
};

const mutations = {
    ADD_MODE(state, data) {
        let index = state.mode.findIndex(o => o.routeName == data.routeName);
        index !== -1 ? state.mode[index] = data : state.mode.push(data);
    },
};

const actions = {
  AddMode({ commit, state }, data) {
    commit('ADD_MODE', data);
  }
}

const getters = {
mode: (state) => {
    return state.mode;
  },
}

export default {
  namespaced: true,
  mutations,
  state,
  getters,
  actions
};

Now in the TextBox component when I am trying to access this.$store.state.Common.mode, on updating the mode value from Vue Devtools does not update the value in the component library. If I access this.$store.state.Common.mode in the main application, I am able to see the changes in real-time. What am I missing? Thanks for your help in advance. Also, please let me know if more information is required.

Vuex store in Component Library

0 Answers