vue.js - 使用 vuex-map-fields 映射计算字段

Question

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

我有一个 Vuex 商店:

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

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

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

Answer 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>