使用变量作为 mapActions 名称

Question

我尝试在一个组件（类似数据表）中使用 Vuex，嵌入到另一个组件（我的页面）中。

DatatableComponnent 是通用的，从主页面管理数据，传入 props。我想将一个道具字符串传递给包含 mapActions 的“链接”的数据表，以管理分页。

我写的

对于主页

<script>
  import { mapGetters } from 'vuex'
  import datatable from '../../Outils/DataTable/datatable.vue'
  import datatableColumn from '../../Outils/DataTable/datatable-column.vue'
  import blocAddIntervenant from './blocAddIntervenant'

  export default {
    props: {
      type: {
        required: true,
        type: String
      }
    },
    data () {
      return {
        visibleBlocAdd: false
      }
    },
    computed: mapGetters({
      personnels: 'personnel/list/items',
      pagination: 'personnel/list/view',
      totalItems: 'personnel/list/totalItems'
    }),
    created () {
      this.$store.dispatch('personnel/list/getPersonnelType', this.type)
    },
    methods: {},
    components: {
      datatable,
      datatableColumn,
      blocAddIntervenant
    }
  }
</script>

对于我的 DatatablCcomponnent 我写了这个

<template>
   <div class="dataTables_paginate" id="DataTables_Table_0_paginate" v-if="pagination">
        <ul class="pagination">
            <li class="paginate_button page-item previous" :class="{'disabled' : !pagination['hydra:previous']}">
                <button data-dt-idx="0" tabindex="0"
                        @click="getPage(pagination['hydra:previous'])"
                        :disabled="!pagination['hydra:previous']"
                        class="page-link">
                    Précédent
                </button>
            </li>
            <li class="paginate_button page-item" v-for="page in nbpages"
                :class="{'active' : pagecourante === page}">
                <a href="#" :data-dt-idx="page" :tabindex="page"
                   class="page-link">{{ page }}</a>
            </li>
            <li class="paginate_button page-item next" :class="{'disabled' : !pagination['hydra:next']}">
                <button
                        data-dt-idx="7"
                        tabindex="0"
                        @click="getPage(pagination['hydra:next'])"
                        :disabled="!pagination['hydra:next']"
                        class="page-link">
                    Suivant</button>
            </li>
        </ul>
    </div>
</div>
</div>
</div>
</template>

<script>
    import headerSetting from './header-settings.vue'
    import {mapActions} from 'vuex'

    export default {
        name: 'datatable',
        props: {
            source: {
                type: Array,
                default: () => []
            },
            mapAction: '',
            totalItems: 0,
            pagination: {},
            actionBar: {
                default: false,
                type: Boolean
            },
            addButton: {
                default: false,
                type: Boolean
            }
        },
        data () {
            return {
                pagecourante: 3,
                columns: [],
                inputParams: [],
                inputParamsSearch: [],
                filter: null,
                sortingId: null,
                isShowAdd: false,
                isShowSearch: false
            }
        },
        methods: {
            addColumn (column) {
                this.columns.push(column)
            },
            ...mapActions({
                getPage: '"' + this.mapAction + '"'
            })
        },
        created () {
        }
    }
</script>

但是当我遇到错误时：[vuex] unknown action type: "undefined" 我不明白为什么，因为我在 mapAction 中有一个值。可能我对 Vuex 有什么不懂的地方。

如果我试试这个

getPage () {
    this.$store.dispatch('"' + this.mapAction + '"')
}

我有这个错误

vuex.esm.js?edaa:417 [vuex] 未知动作类型：“personnel/list/getPersonnelPagination”

但是这个动作存在于personnel/list.js中

const actions = {
  getPersonnelPagination ({commit}, page) {
    commit(loading(true))
    fetch(page)
      .then(response => response.json())
      .then(data => {
        commit(loading(false))
        commit(success(data['hydra:member']))
        commit(view(data['hydra:view']))
      })
      .catch(e => {
        commit(loading(false))
        commit(error(e.message))
      })
  }
} 

如果我尝试不使用“

getPage () {
    this.$store.dispatch(this.mapAction)
}

我还有一个错误

Uncaught TypeError: Cannot read property ‘includes’ of undefined
at webpack_exports.a (fetch.js?ed24:18)
at Store.getPersonnelPagination (list.js?efd7:66)
at Array.wrappedActionHandler (vuex.esm.js?edaa:704)
at Store.dispatch (vuex.esm.js?edaa:426)
at Store.boundDispatch [as dispatch] (vuex.esm.js?edaa:332)
at VueComponent.getPage (402:207)
at Proxy.boundFn (vue.esm.js?65d7:188)
at click (datatable.vue?e373:379)
at invoker (vue.esm.js?65d7:1983)
at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?65d7:1781)

我不明白，对我来说只是字符串，为什么我不能将带有字符串的变量传递给 mapAction 或 dispatch ？

感谢您的帮助， 大卫

Answer 1

此代码将不起作用，因为在运行此代码时未定义 this.mapAction。此代码在组件声明时执行，甚至在组件实例创建之前，因此this 不引用组件。 this.mapAction 是一个只能存在于组件范围内的 prop。

...mapActions({
    //this.mapAction does not exist when this code is executed.
    getPage: '"' + this.mapAction + '"'
})

我认为你在正确的轨道上，下面的getPage() 看起来是正确的。带有引号的其他实现将不起作用（除非您的操作名称被引号包围，我认为这不太可能）。但mapAction 的值需要是存储中操作名称的字符串。该操作也必须存在于商店中。如果它为 null、未定义或在 store 中不是一个 action，你会得到一个错误。

getPage () {
    this.$store.dispatch(this.mapAction)
}

看起来它实际上是根据堆栈跟踪使用此行at Store.getPersonnelPagination (list.js?efd7:66) 在商店中调用您的操作，但操作处理程序中可能存在错误。

Answer 2

感谢您的帮助。它适用于您的解决方案，而且我的操作有误。我需要使用一个参数，但是，我没有在调度中传递这个参数。

不行！

非常感谢 大卫