javascript - Vuetify 和 Vuex 商店：无法从商店渲染标题

Question

所以在我正在开发的这个应用程序中，我希望允许用户选择在某个数据表中显示的标题，并且这个选择不会在页面更改时丢失。我认为使用 Vuex 存储来缓存标头的状态可能是解决此问题的方法，但我在渲染时遇到了问题。

渲染数据表时，出现以下错误：

TypeError: this.headers.filter is not a function
    headersWithCustomFilters webpack-internal:///./node_modules/vuetify/lib/components/VDataTable/VDataTable.js:208
    VueJS 3
    customFilterWithColumns webpack-internal:///./node_modules/vuetify/lib/components/VDataTable/VDataTable.js:270
    filteredItems webpack-internal:///./node_modules/vuetify/lib/components/VData/VData.js:163
    VueJS 3
    computedItems webpack-internal:///./node_modules/vuetify/lib/components/VData/VData.js:169
    VueJS 3
    scopedProps webpack-internal:///./node_modules/vuetify/lib/components/VData/VData.js:189
    VueJS 3
    render webpack-internal:///./node_modules/vuetify/lib/components/VData/VData.js:410
    VueJS 14
    mounted webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/legalfile/LegalFileList.vue?vue&type=script&lang=js&:183
    promise callback*mounted webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vuetify-loader/lib/loader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/legalfile/LegalFileList.vue?vue&type=script&lang=js&:182
    VueJS 18
    mutations webpack-internal:///./src/store/index.js:228
    wrappedMutationHandler webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:773
    commitIterator webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:411
    commit webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:410
    _withCommit webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:555
    commit webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:409
    boundCommit webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:354
    actions webpack-internal:///./src/store/index.js:194
    wrappedActionHandler webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:780
    dispatch webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:461
    boundDispatch webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:351
    <anonymous> webpack-internal:///./src/router/index.js:865
    iterator webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2159
    step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1885
    step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1889
    runQueue webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1893
    confirmTransition webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2186
    transitionTo webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2073
    push webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2404
    push webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2819
    handler webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1099
    VueJS 2
instrument.js:118:46

这是代码的最小可重现示例：

<template>
  <v-data-table
  v-model="selectedLegalFiles"
  :headers="visibleHeaders"
  :items="legalFiles"
  :items-per-page="20"
  >
  </v-data-table>
</template>

<script>
  export default {
    computed: {
      ...mapGetters({
        filterableHeaders: 'filterableHeaders',
        visibleHeaders: 'visibleHeaders',
        headersExport: 'headersExport'
      }),
      visibleHeaders: {
        get () {
          return this.visibleHeaders
        },
        set (value) {
          this.toggleVisibility(value)
        }
      }
    },
    methods: {
      ...mapMutations({
        toggleVisibility: legalFileListSettingsTypes.mutations.toggleVisibility
      }),
  }
</script>

import types from '@/types/legalfile/legal-file-list-settings'
import _ from 'lodash'

const state = {
  headers: [
    { text: 'legal_file.serie', value: 'serie', visible: true }, // tc
    { text: 'common.code', value: 'code', visible: true }, // t
    { text: 'legal_file.subcode', value: 'subcode', visible: true }, // t
    { text: 'common.type', value: 'type', visible: true }, // t
    { text: 'legal_file.class', value: 'legalfile_class', visible: true }, // t
    { text: 'legal_file.phase', value: 'phase', visible: true }, // t
    { text: 'legal_file.responsible', value: 'responsible', visible: true, permission: { action: 'read', module: 'contacts' } }, // t
    { text: 'legal_file.contact_roles', value: 'aux_roles', visible: true, permission: { action: 'read', module: 'contacts' } }, // t
    { text: 'legal_file.court_appointed', value: 'court_appointed', visible: false }, // t
    { text: 'base.created_date', value: 'creation_date', visible: false }, // t
    { text: 'legal_file.other_data.penal.crime_calification', value: 'crime_calification', visible: false }, // t
    { text: 'legal_file.other_data.penal.criminal_record', value: 'criminal_record', visible: false }, // t
    { text: 'common.description', value: 'description', visible: false }, // t
    { text: 'legal_file.other_data.labor.laboral_mediation', value: 'laboral_mediation', visible: false }, // t
    { text: 'legal_file.other_data.penal.law_mediation', value: 'law_mediation', visible: false }, // t
    { text: 'common.state', value: 'state', visible: false }, // t
    { text: 'base.table.actions', value: 'actions', sortable: false, visible: true } // t
  ]
}

const getters = {
  [types.getters.visibleHeaders]: state => state.headers.filter(header => header.visible === true),
  [types.getters.filterableHeaders]: state => state.headers.filter(header => header.value !== 'actions'),
  [types.getters.headersExport]: state => state.headers.filter(header => header.visible === true && header.value !== 'actions')
}

const mutations = {
  [types.mutations.toggleVisibility] (state, value) {
    const index = _.findIndex(state.headers, function (o) { return o.value === value })
    state.headers[index].visible = !state.headers[index].visible
  }
}

export default {
  state,
  getters,
  mutations
}

标签： javascriptvue.jsvuetify.jsvuex