How to pass data from vuex store through module to vue component?

Question

I'm able to console data, as well as able to see data in vuex dev tool but not able to display them in table. Please if someone could check my code and tell me what is wrong with it. Thanks folks. I tried differents methods like async/await, promise, getters... but I was not able to to get the data, probably I was not calling it properly.

ROLE.VUE

<emplate>
  <di>
    <p v-for="(role, index) in roles :key="index">
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default ({
  name: 'Role',
  metaInfo: {
    title: 'Role'
  },

  created  () {
    this.$store.dispatch('loadRoles').then((response) => { console.log(response) })
  },

  computed: {
    ...mapState([
      'roles'
    ])
  }
})

</script>

role.js

import Axios from 'axios'

export default {
//   namespaced: true,

  state: {
    roles: [],
  },

  getters: {
    roles (state) {
      return state.roles
    }
  },

  mutations: {
    SET_ROLES (state, roles) {
      state.roles = roles
    }
  },

  actions: {

loadRoles ({ commit }) {
  Axios.get('/settings/roles')
    .then((response) => {
      console.log(response.data)
      //   let roles = response.data
      commit('SET_ROLES', response.data.roles)
    })
}

} }

index.js

import role from './role'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {

  },

  mutations: {
    //
  },

  modules: {
    role
  },

  actions: {
    //
  }
})

Main.js

import { store } from './store/store'
new Vue({
router,
store,
ValidationProvider,
render: h => h(App)
})

Dan · Accepted Answer · 2019-11-29 08:23:13Z

2

When loading from a module with mapState, you need to specify the name of the module you are loading from. Here is the proper syntax for your case:

...mapState('role', ['roles'])

The first argument is the module name, and the second is an array of state properties from that module.

answered Nov 29, 2019 at 8:23

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

livreson ltc Over a year ago

I'm getting this error. [vuex] unknown action type: loadRoles vuex.esm.js:419. Error in created hook: "TypeError: this.$store.dispatch(...) is undefined"

Dan Over a year ago

That will be unrelated to any mapping, it's an error from where you've tried to access the store through the Vue instance property. The reason for that error is also syntax. It should be this.$store.dispatch('role/loadRoles'). It may be handy for you to consult documentation to learn syntax of using vuex modules.

livreson ltc Over a year ago

The error message is gone but data still not showing in vue component

Dan Over a year ago

You're not doing anything to show it. This is also wrong syntax: <p v-for="(role, index) in roles :key="index">. You didn't close the quotes of the v-for, and even then, it only creates p elements and sets a key but doesn't actually attempt to show any data. You'd need something like <p v-for="(role, index) in roles" :key="index">{{ role }}</p>. If you're brand new to Vue, I would try out some tutorials first.

livreson ltc Over a year ago

,you are completely right. I comment this line while I was troubleshooting the codes. <pre>let roles = response.data, commit('SET_ROLES', roles)<code>. It is now working as expected. Thanks a lot

|

Collectives™ on Stack Overflow

How to pass data from vuex store through module to vue component?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related