Vuex no longer able to "inject" the store into all child components

[sdellis]

I am having trouble upgrading to the latest version of VueDS. Something has changed (I'm not sure which version) which is preventing Vuex from "injecting" the store into all child components from the root component.

I have a working design system with the following main.js file. This is based off VueDS v2.1.3. Here are the public docs.

Using this same setup with the latest version of VueDS does not work. I have a simple Counter component example here. These are the files I've modified in the latest VueDS version.

I have simplified the main.js file. I am able to get Vuex to work if I access the store directly from the components, but I really want Vuex to be able to inject it as described in the docs. What is interesting is that the state shows up in the Vue Dev Tools. However, it's not an attached property on the child components, so I can't access the state from within the components.

I understand this may be beyond the scope of what VueDS is supposed to do, but I have been banging my head on this problem for a while and it's critical for me to get this working so I can upgrade to the latest version.

Is anyone using Vuex and able to get this to work in the latest version?

Thanks in advance for any insight.

[sdellis]

I finally figured this out. There was a change in the Vue Styleguidist configuration. In order to get the Vuex store to load in the docs, you need to import it and return it in the /docs/components/Preview.js file previewComponent function as shown in this code snippet:

import store from "../../src/store"
...
export default previewComponent => {
  // https://vuejs.org/v2/guide/render-function.html
  return {
    store,
    render(createElement) {
      return createElement(previewComponent)
    },
...

[arielsalminen]

@sdellis I’m glad you found the answer for this!