Добрый вечер.
Есть хранилище и в нем поле filters:
//...
const createStore = () => {
return new Vuex.Store({
state: {
jobs: [],
filters: {}
},
//...
actions: {
async nuxtServerInit({ commit }) {
const result = await api.getJobs()
commit("SET_JOBS", result.data)
commit("SET_FILTERS", filters)
}
}
})
}
который заполняется из файла filters.js (в будущем это будет json подтягиваемый через axios):
export default {
incoming: {
approving: {
title: "Согласование",
filterFunc: function(iJob) {
return iJob.subject.match(/Согласуйте.*/)
}
}
//...
}
}
и собственно сама компонента, если в ней так же импортировать filters.js и работать с ней (не из хранилища), то всё работает, НО если обратиться к filters из хранилища, то объект теряет filterFunc:
<template>
<div>
<!--тут всё ок, в хранилище оно есть-->
<h5>{{ this.$store.state.filters.incoming[$route.params.filter].title }}</h5>
<JobList :jobs = filteredJobs />
</div>
</template>
<script>
//...
export default {
data() {
return {
filters
}
},
computed: mapState({
filteredJobs: function(state) {
const filterName = this.$route.params.filter
//const filterFunc = this.filters.incoming[filterName].filterFunc // так РАБОТАЕТ
const filterFunc = state.filters.incoming[filterName].filterFunc // так НЕ работает
return jobs
}
}),
//...
}
</script>
а самое странное, что при ssr (т.е. если открыть страницу и обновить), то оно сначала заполняется, а потом сбрасывается с комментарием "undefined is not a function". Можно конечно оставить как есть, но хотелось бы понять, что не так...
