CODEWITHSUNDEEP
javascriptvue.jsvuex
Igoohd
Igoohd

Reputation: 166

How to add vuex action with bool return?

Im trying to add a simple common action in vuex that returns a bool,but it looks like it doesn't return what I need.

My child component call:

<ArrowDownIcon
    class="campaigns-grid__header-direction"
    v-if="isOrderedBy(column.id)"
    class="{'campaigns-grid__header-direction--asc': order.isDescending}"
/>

My imports and vuex call on root component:

import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('campaigns')
    
export default {
    
    methods: {
        ...mapActions(['isOrderedBy', 'orderBy'])
    }
}

My vuex module ('campaigns'):

export default {
    namespaced: true,

    actions: {
        isOrderedBy (column) {
            if (column === 'test') {
                return true
            }

            return false
        },
    }
}

Upvotes: 0

Views: 560

Answers (2)

MartinsOnuoha
MartinsOnuoha

Reputation: 571

As much as this might possibly work, You shouldn't use Vuex Actions to return Boolean values since Vuex actions return promises. The ideal process of working with vuex is:

-> dispatch Action -> Action makes Network calls -> Actions Commits Data to State -> Getters Pull data from State

To Solve this issue use Mixins, Since you're trying to make the isOrderedBy(..) function available application wide, and you also want it to return a boolean value depending on the provided argument.

Create a mixin folder if you don't already have one, and add an orderMixin.js file: the file should contain the isOrderedBy() function as a method.

export const orderMixin = {
  methods: {
    isOrderedBy(column) {
      return column === 'test'
    }
  } 
}

Then within your component import the mixin and use it.

<template>
...
<ArrowDownIcon
    class="campaigns-grid__header-direction"
    v-if="isOrderedBy(column.id)"
    class="{'campaigns-grid__header-direction--asc': order.isDescending}"
/>
...
</template>

<script>
import { orderMixin } from 'path-to-mixins/orderMixin'

export default {
  mixins: [orderMixin],
  ...
}
</script>

Upvotes: 1

ecoplaneteer
ecoplaneteer

Reputation: 1984

In action returns .

So if you want to get return value from the action you can do like

if (await isOrderedBy()) {
   console.log('isOrderBy returns true')
} else {
   console.log('isOrderBy returns false')
}

Upvotes: 0

Related Questions