Map computed field with vuex-map-fields

Question

I have a question about mapping computed fields using vuex-map-fields.

I have a Vuex Store:

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

The form has two input fields: countryCode and phoneNumber. I want the phone value will be updated based on countryCode and phoneNumber.

How do I solve the problem with vuex-map-fields?

Answer 1

Based on the vuex-map-fields README, edit your store setup to use getField getter and updateField mutation from vuex-map-fields:

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

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

...and then your component would use mapFields from 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>

For phone to be computed from the other two state variables, you could use a Vuex getter that formats it:

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

...then use Vuex's mapGetter to display phone in your component:

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

<script>
import { mapGetters } from 'vuex'

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

Altogether, your component would look similar to this:

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