Question

我正在使用Vuex模块来陈述我的数据。我将数据存储在多个模块中，以保持我的代码库的美观和清洁。

当使用vuex-map-fields时，我遇到了使用来自多个模块的数据的情况。似乎没有方法可以做到这一点，或者我做错了。

以下是我目前的代码; 我的组件

<template>
    <div class="">
        <input type="text" v-model="no_panels"><br>
        <input type="text" v-model="firstName"><br>
        <router-link to="/step-2">Go to step 2</router-link>
    </div>
</template>

<script>
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
    getterType: [
        'getKitchenField',
        'getApplicantField',
    ],
    mutationType: 'updateKitchenField',
});

export default {
    computed: {
        ...mapFields(['no_panels', 'firstName', 'lastName'])
    },
}
</script>

我的商店文件

import kitchen from './kitchen';
import applicant from "./applicant";

export default {
    modules: {
        kitchen: kitchen,
        applicant: applicant
    },
    strict: false
 }

Applicant.js

import { createHelpers } from 'vuex-map-fields';

const { getApplicantField, updateApplicantField } = createHelpers({
    getterType: 'getApplicantField',
    mutationType: 'updateApplicantField',
});

export default {
    state: {
         firstName: '',
        lastName: ''
    },
    getters: {
        getApplicantField
    },
    mutations: {
        updateApplicantField
    }
}

上面的代码导致以下错误：

渲染错误：＆＃34; TypeError：this。$ store.getters [getterType]不是函数＆＃34;

Answer 1

我是vuex-map-fields的创建者，作者问the same question on GitHub：

您可以解构并重命名createHelpers()的返回值并将其调用两次，而不是将多个getter传递给createHelpers()。

const { mapFields: mapKitchenFields } = createHelpers({
  getterType: 'getKitchenField',
  mutationType: 'updateKitchenField',
});
const { mapFields: mapApplicantFields } = createHelpers({
  getterType: 'getApplicantField',
  mutationType: 'updateApplicantField',
});

export default {
  computed: {
    ...mapKitchenFields(['no_panels']),
    ...mapApplicantFields(['firstName', 'lastName']),
  },
}

如果解构语法对您而言是新手，您可以从Wes Bos了解更多相关信息：https://wesbos.com/destructuring-renaming/

Vuex-map-fields通过模块更新多个商店

1 个答案: