使用 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-fieldsREADME，编辑您的商店设置以使用以下来源的getFieldgetter 和updateFieldmutation vuex-map-fields：

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

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

...然后您的组件将使用mapFieldsfrom vuex-map-fields：

<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从其他两个状态变量计算，您可以使用格式化它的Vuexgetter：

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

...然后使用Vuex'smapGetterphone在你的组件中显示：

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