使用变量作为 mapActions 名称
Using a variable as mapActions name
我尝试在组件(类似数据表)中使用 Vuex,嵌入到另一个组件(我的页面)中。
DatatableComponnent是通用的,从主页面管理数据,传入props。我想将道具字符串传递给包含 mapActions 的“link”的数据表,以便管理分页。
我写的
对于主页
<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 ?
感谢您的帮助,
大卫
此代码将不起作用,因为 this.mapAction
未在此代码 运行 处定义。此代码在组件实例创建之前声明组件时执行,因此 this
不引用组件。 this.mapAction
是prop,只能存在于组件范围内。
...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)
,但操作处理程序中可能存在错误。
感谢您的帮助。它适用于您的解决方案,而且我的操作有误。我需要使用一个参数,但是,我没有在调度中传递这个参数。
不行!
非常感谢
大卫
我尝试在组件(类似数据表)中使用 Vuex,嵌入到另一个组件(我的页面)中。
DatatableComponnent是通用的,从主页面管理数据,传入props。我想将道具字符串传递给包含 mapActions 的“link”的数据表,以便管理分页。
我写的
对于主页
<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 ?
感谢您的帮助, 大卫
此代码将不起作用,因为 this.mapAction
未在此代码 运行 处定义。此代码在组件实例创建之前声明组件时执行,因此 this
不引用组件。 this.mapAction
是prop,只能存在于组件范围内。
...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)
,但操作处理程序中可能存在错误。
感谢您的帮助。它适用于您的解决方案,而且我的操作有误。我需要使用一个参数,但是,我没有在调度中传递这个参数。
不行!
非常感谢 大卫