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

Question

我可以控制数据，也可以在 vuex 开发工具中查看数据 但无法在表格中显示它们。请如果有人可以检查 我的代码并告诉我它有什么问题。谢谢各位。我尝试了不同的方法，例如 async/await、promise、getters……但我无法获取数据，可能是我没有正确调用它。

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 属性数组。