如何通过模块将数据从 vuex store 传递到 vue 组件？

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)
})

Answer 1

从使用 mapState 的模块加载时，您需要指定要从中加载的模块的名称。以下是适合您的案例的正确语法：

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

第一个参数是模块名称，第二个参数是该模块的 state 个属性数组。

如何通过模块将数据从 vuex store 传递到 vue 组件？

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

javascript

vue.js

vuex

vuejs2

vuex-modules