I am currently learning Vue and using it with Vuex (without Webpack). However, I am facing some challenges while implementing a simple example and the documentation is not very clear to me.
One issue I encountered is that I cannot access the Vuex store using the
thispointer inside the component'scomputedproperty. For example:this.$store.state.nav.title. As a workaround, I had to use the globalappvariable instead. Also,this.$parentand$rootdid not work as expected.Another question I have is regarding initializing multiple Vue components simultaneously. Shouldn't they be automatically mounted when I pass the
componentsproperty to the Vue constructor object? What is the correct way to initialize header, footer, and body components all at once?
var app = new Vue({
el: document.getElementById('app'),
data: {
title: store.state.nav.title
},
computed: {},
methods: {},
mounted: function(){},
updated: function(){},
store: store,
components: {
componentheader,
componentnavbar,
componentbody,
componentfooter
}
});
for (var component_name in app.$root.$options.components) {
if (typeof app.$root.$options.components[component_name] === 'function') {
var MyComponent = Vue.extend(app.$root.$options.components[component_name]);
var component = new MyComponent().$mount();
document.getElementById('app').appendChild(component.$el);
}
}
Here is the full example:
// JavaScript code here// CSS code here// HTML code here