Я не могу получить данные, используя mapState в Vue, используя Vuex

Question

Я немного запутался с mapState ... просто проверьте это

index.vue ...

    computed: {

        //this doesn't work
        ...mapState(['user']), 

        // this works 
        user () { 
            return this.$store.state.data.user
        }
    }

модулей / данных.js

...

   const state = {
        msg: 'Tom'
    }
...

Я предполагаю, что ...mapState(['user']) возвращает user () { return this.$store.state.user} без data объекта, как поясняет ЛинусБорг в этой теме https://forum.vuejs.org/t/dont-understand-how-to-use-mapstate-from-the-docs/14454/9

, вы можете проверитьполный код здесь -> https://codesandbox.io/s/n5z02km81l

Answer 1

Поскольку ваш магазин разделен на модули, вам нужно использовать синтаксис объекта с mapState для доступа к состоянию из подмодуля:

...mapState({
  msg: state => state.data.msg
})

https://codesandbox.io/s/nn0zo023mm

Или вы можете сделатьdata хранить пространство имен, то есть добавить namespaced: true, к data.js модулю, затем получить к нему доступ с помощью:

...mapState('data', {
  msg: state => state.msg
})

https://codesandbox.io/s/olp064qm55

Answer 2

Это не работает, потому что user является свойством data

Вам необходимо создать геттеры в вашем магазине, а нам mapGetters в вашем компоненте.

https://vuex.vuejs.org/guide/getters.html

export default store = new Vuex.Store({
  state: { ... }
  getters: {
    user => (state) => state.data.user
  }
}

Компонент

import { mapGetters } from 'vuex'

export default {

  computed: {
    ...mapGetters(['user'])
  }
}