I am working on a project for which I have an API service and webclient service (Hosted on google appengine, just for information). The webapp/webclient is served by a golang server, which will take requests, make appropriate API calls and compile HTML template with data from the API call In order to initiate the page with some information instead of waiting for the app itself to make API calls, which could be less SEO friendly.
As a javascript Rendering engine/framework I am using vue.js, and in order to share state between components and to have a single source of truth, I am trying to use vuex ...
The thing gets a little bit dirty because I am injecting some Javascript in the response served by the webserver, containing a dynamic vuex.Store.state ... The initial state is inserted in the HTML response, which later imports an external Js file (the app) which would call this global Store, and insert it in the root Vue instance and every of its children.
The issue is that when trying to access the store.state via this.$store.state I receive
TypeError: undefined is not an object (evaluating 'this.$store.state')
Any idea? Is it possible to initiate the store in a HTML file, use the store in a later imported external file to inject its content? In the external JS I am able to call the global Store and log it in the console, so this object seems to be global as expected.
when starting the root Vue instance and passing the store in the options, seems to be a problem because I get an error when trying to call this.$store.state in child Vue.