时间戳

首页 > 解决方案 > Vuex-map-fields 通过模块更新多个 store

vue.js - Vuex-map-fields 通过模块更新多个 store

问题描述

我正在使用 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
 }

申请者.js

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

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

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

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

渲染错误：“TypeError：this.$store.getters[getterType] 不是函数”

标签： vue.jsvuejs2vue-componentvuexvuex-modules

解决方案

我是 vuex-map-fields 的创建者，作者在 GitHub 上问了同样的问题：

无需将多个 getter 传递给createHelpers()，您可以解构并重命名 的返回值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']),
  },
}

如果 destructuring 语法对您来说是新的，您可以从 Wes Bos 阅读更多关于它的信息：https ://wesbos.com/destructuring-renaming/

推荐阅读