How to check if an object in MapState is not empty?

Question

I need to check if an object coming from vuex is empty in my Vue component

My component script:

<script>
import { createNamespacedHelpers } from 'vuex'

const { mapState } = createNamespacedHelpers('payments')

export default {

    methods: {
        ...mapState(['bankData']),

        request () {
            if (this.bankData) { //How can I do this condition? 'if (this.bankData)'
                return this.$router.push({ name: 'payment.request' })
            }
            this.$root.$emit('openModal')
        }
    }
}
</script>

The call of my module:

export default new Vuex.Store({
    modules: {
        payments
    }
})

My state in store:

state: () => ({
    bankData: {}
}),

When i do console.log(this.bankData) i receive:

ƒ mappedState () {
      var state = this.$store.state;
      var getters = this.$store.getters;
      if (namespace) {
        var module = getModuleByNamespace(this.$store, 'mapState', namespace);
  …

score 1 · Accepted Answer · answered Oct 28 '20 at 19:47

1

mapState should be in computed section and not in methods:

  computed: {
        ...mapState(['bankData']),
  },
  methods: {
    request () {
            // now this.bankData is an object from a state and not a mapState function
            if (this.bankData) {
                return this.$router.push({ name: 'payment.request' })
            }
            this.$root.$emit('openModal')
        }
  }

As for checking an objects is empty or not, for instance, see this answer

answered Oct 28 '20 at 19:47

Anatoly

20,799
3
28
42

Thanks for the answer, but why? And how i check if the object is empty? – Igoohd Oct 29 '20 at 01:25
Because `state's object` is also an object that just stores data. See https://vuex.vuejs.org/guide/state.html#the-mapstate-helper how to work with mapSatte properly – Anatoly Oct 29 '20 at 05:55

How to check if an object in MapState is not empty?

1 Answers1