vuex 저장소에서 모듈을 통해 vue 구성 요소로 데이터를 전달하는 방법은 무엇입니까?

vuex 저장소에서 모듈을 통해 vue 구성 요소로 데이터를 전달하는 방법은 무엇입니까?

vuex dev 툴에서는 데이터를 볼 수 있지만 테이블에 표시할 수 없습니다.누군가 제 코드를 확인하고 무엇이 문제인지 알려주실 수 있나요?감사합니다, 여러분.비동기/대기, 약속, getters 등 다양한 방법을 시도했습니다.전화를 제대로 걸지 못했는지 데이터를 얻을 수 없었습니다.

역할.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.devel.devel.displays)

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.displaces를 표시합니다.

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

이 포함된 모듈에서 로드하는 경우mapState로딩할 모듈의 이름을 지정해야 합니다.사용하시는 경우의 적절한 구문은 다음과 같습니다.

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

첫 번째 인수는 모듈 이름이고 두 번째 인수는 다음 인수의 배열입니다.state속성을 지정합니다.

언급URL : https://stackoverflow.com/questions/59100748/how-to-pass-data-from-vuex-store-through-module-to-vue-component