계산 필드를 vuex-map-fields로 매핑합니다.

계산 필드를 vuex-map-fields로 매핑합니다.

다음을 사용하여 계산 필드 매핑에 대한 질문이 있습니다.vuex-map-fields.

Vuex 스토어가 있습니다.

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

양식에는 다음 두 가지 입력 필드가 있습니다.countryCode그리고.phoneNumber. 나는 그.phone값을 기반으로 갱신됩니다.countryCode그리고.phoneNumber.

이 문제를 해결하려면vuex-map-fields?

README에 따라 사용할 스토어 설정을 편집합니다.getField더 나아가다updateField로부터의 돌연변이.vuex-map-fields:

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

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

...그러면 당신의 컴포넌트는mapFields부터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다른 두 상태 변수에서 계산하려면 Vuex를 사용하여 형식을 지정할 수 있습니다.

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

...그 후 Vuex를 사용하여 표시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>

언급URL : https://stackoverflow.com/questions/59816698/map-computed-field-with-vuex-map-fields