如何使用 bool return 添加 vuex 动作？

Question

我正在尝试在 vuex 中添加一个简单的通用操作，它 return 是一个布尔值，但它看起来 return 不是我需要的。

我的子组件调用：

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

我在根组件上的导入和 vuex 调用：

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

我的 vuex 模块（'campaigns'）：

export default {
    namespaced: true,

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

            return false
        },
    }
}

Answer 1

在vuex action returns promise.

因此，如果您想从操作中获得 return 价值，您可以这样做

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

Answer 2

尽管这可能有效，但您不应该将 Vuex 操作用于 return 布尔值，因为 Vuex 操作 return 承诺。使用vuex的理想流程是：

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

要解决此问题，请使用 Mixins，因为您正在尝试使 isOrderedBy(..) 函数在应用程序范围内可用，并且您还希望它 return 一个布尔值，具体取决于提供的参数。

如果您还没有 mixin 文件夹，请创建一个，并添加一个 orderMixin.js 文件：该文件应包含 isOrderedBy() 函数作为方法。

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

然后在您的组件中导入 mixin 并使用它。

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

如何使用 bool return 添加 vuex 动作？

How to add vuex action with bool return?

javascript

vue.js

vuex