Question

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

DatatableComponnent是通用的，从主页面管理数据，传入道具。我想将一个道具字符串传递给Datatable，其中包含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]未知动作类型：“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或者发送？

感谢您的帮助，大卫

Answer 1

此代码无效，因为在运行此代码时未定义this.mapAction。当声明组件时，即在创建组件的实例之前执行此代码，因此this不引用该组件。 this.mapAction是一个只能存在于组件范围内的道具。

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

我认为你走在正确的轨道上，以下getPage()看起来是正确的。带引号的其他实现将不起作用（除非您的动作名称被引号包围，我觉得不太可能）。但mapAction的值必须是商店中操作名称的字符串。该操作也必须存在于商店中。如果它是null，未定义，或者不是商店中的操作，则会出现错误。

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

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

Answer 2

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

不行吗！

非常感谢大卫

将变量用作mapActions名称

2 个答案: