I have run into a roadblock or maybe just confusion on my part when it comes to Vuex coming from uibuilder.
Within my index.js file, I have a store. Then I have the app section that (partially) looks like this:
const app = new Vue({
el: '#app',
store,
components: {
},
data: {
}, // --- End of data --- //
computed: {
doneTodos(){
return this.$store.getters.doneTodos
}
}, // --- End of computed --- //
This works very well (please ignore the non-sensical name). In basically every tutorial I have found on Vuex, they suggest that once you have a lot of computed items, this syntax gets cumbersome. I expect in the end to have a large number and so want to follow the advice. A sample explanation is here at Intro to the vuex map helpers.
By using the mapGetters helper, then my computed section could become:
const app = new Vue({
el: '#app',
store,
components: {
},
data: {
}, // --- End of data --- //
computed: {
...mapGetters({
doneTodos: 'doneTodos'
}
}, // --- End of computed --- //
How to use the helpers is clear enough. The stumbling block is to use each of the helpers, they all say to add:
import { mapGetters } from 'vuex'
or
import { mapState } from 'vuex'
etc.
When I try to add this to my index.js file, then in the console of my browser, I get the following error:
Searching the web, it initially looked like the solution was to change the inclusion of vuex from
<script src="../uibuilder/vendor/vuex/dist/vuex.js"></script>
to
<script type="module" src="../uibuilder/vendor/vuex/dist/vuex.js"></script>
This doesn't work. I am the limits of my understanding of Javascript, Vue, VueX and Google-Fu.
Any suggestions on how I can enable the use of the Vuex Map Helpers?
