How to use Vuex in Vue using vue-enterprise-boilerplate

Question

I am trying to use Vuex in chrisvfritz/vue-enterprise-boilerplate.
But I am unsure on how to proceed.

My <script> part of a "courses.vue" view component looks like this:

<script>
import Layout from '@layouts/main'
import { mapActions } from 'vuex'

export default {
  page: {
    title: 'Courses',
    meta: [{ name: 'description', content: 'Courses' }],
  },
  components: { Layout },
  mounted: () => {
    this.setTitle('courses')
    this.setIcon('about balance')
  },
  methods: {
    ...mapActions(['setTitle', 'setIcon']),
  },
}
</script>

Other answers on how to use Vuex tell me to use:

import store from '@state/store'

new Vue({
    store
});

But the "courses.vue" view component does not a a "new Vue" part.

The error I am getting is: "_this.setTitle is not a function".

acdcjunior · Accepted Answer · 2018-02-24 15:30:05Z

The notation:

new Vue({
    store
});

Is actually:

new Vue({
    store: store
});

So, to get the same outcome, just add a store: store to your export default { object.

Though, I must say, you probably want to add that store to the main Vue object, not a component's. Note: From what I see (https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/main.js) the code already adds the store, sou you wouldn't have to.

The error I am getting is: "_this.setTitle is not a function".

The error comes from here:

  mounted: () => {
    this.setTitle('courses')
    this.setIcon('about balance')
  },

In this notation, inside the mounted function the this won't refer to the Vue instance, but to other object (possibly window). Here's the notation I suggest:

  mounted() {
    this.setTitle('courses')
    this.setIcon('about balance')
  },

Other than that, you could do mounted: function() {, but I think that the notation above is cleaner (the only reason I wouldn't use it is browser support, but since you were using ()=>{}, I'm assuming you are targeting newer browsers).

Collectives™ on Stack Overflow

How to use Vuex in Vue using vue-enterprise-boilerplate

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related