使用 vuex-map-fields 映射计算域答案

【问题标题】：Map computed field with vuex-map-fields使用 vuex-map-fields 映射计算域
【发布时间】：2020-01-20 03:34:40
【问题描述】：

我有一个关于使用 vuex-map-fields 映射计算字段的问题。

我有一个 Vuex 商店：

export const state = () => ({
  countryCode: null,
  phoneNumber: null,
  phone: null
})

该表单有两个输入字段：countryCode 和 phoneNumber。我希望 phone 值将根据 countryCode 和 phoneNumber 进行更新。

如何解决vuex-map-fields 的问题？

【问题讨论】：

@tony19：非常感谢您让我的问题更具可读性。

标签： vue.js vuejs2 vuex

【解决方案1】：

基于vuex-map-fields README，编辑您的商店设置以使用来自vuex-map-fields 的getField getter 和updateField 突变：

// store.js
import { getField, updateField } from 'vuex-map-fields'

export default new Vuex.Store({
  //...
  state: {
    countryCode: '',
    phoneNumber: '',
  },
  getters: {
    getField,
  },
  mutations: {
    updateField,
  },
})

...然后您的组件将使用来自vuex-map-fields 的mapFields：

<template>
  <div id="app">
    <input v-model="countryCode">
    <input v-model="phoneNumber">
  </div>
</template>

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

export default {
  //...
  computed: {
    ...mapFields([
      'countryCode',
      'phoneNumber',
    ]),
  },
}
</script>

要从其他两个状态变量计算 phone，您可以使用格式化它的 Vuex getter：

// store.js
const store = new Vuex.Store({
  //...
  getters: {
    phone: state => `${state.countryCode}-${state.phoneNumber}`
  },
})

...然后使用Vuex's mapGetter 在您的组件中显示phone：

<template>
  <div>
    <pre>phone: {{ phone }}</pre>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  //...
  computed: {
    ...mapGetters(['phone'])
  }
}
</script>

总而言之，您的组件看起来类似于：

<template>
  <div>
    <input v-model="countryCode" type="number">
    <pre>countryCode: {{ countryCode }}</pre>
    <input v-model="phoneNumber" type="tel">
    <pre>phoneNumber: {{ phoneNumber }}</pre>
    <pre>phone: {{ phone }}</pre>
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapFields(['countryCode', 'phoneNumber']),
    ...mapGetters(['phone'])
  }
}
</script>

【讨论】：