Vue + Vuex：格式化输入数据

Question

受几个示例的启发，我正在尝试编写一个自定义组件，用特定方法格式化它的值。

这是组件：

<template>
  <input
    type="text"
    v-model="inputValue"
  />
</template>

<script type="text/javascript">
  import {formatPhoneNumber} from '~/utils/string';

  export default {
    computed: {
      inputValue: {
        get() {
          return formatPhoneNumber(this.value)
        },
        set(value) {
          this.$emit('input', formatPhoneNumber(value))
        }
      }
    },
  }
</script>

我用的是Vuex，我在父组件中这样调用组件：

<PhoneInput :value="cellPhoneNumber" class="input" @input="addCellPhoneNumber" />

  computed: {
    cellPhoneNumber() {
      return this.$store.state.identity.cellPhoneNumber;
    },
  },
  methods: {
    addCellPhoneNumber: function(phoneNumber) {
      this.$store.commit('identity/addCellPhoneNumber', phoneNumber)
    },
  }

set 部分工作，它进入存储，但数据返回到组件，cellPhoneNumber 被调用，但不是 inputValue#get。

由于这可能与我在父组件中使用@input/:value 的事实有关，因此我尝试在它的子组件上也使用它：

<template>
  <input
    @input="formatValue"
    type="text"
    :value="formattedValue"
  />
</template>

<script type="text/javascript">
  import {formatPhoneNumber} from '~/utils/string';

  export default {
    computed: {
      formattedValue: function(){
        return formatPhoneNumber(this.value)
      },
    },
    methods: {
      formatValue(e) {
        this.$emit('input', formatPhoneNumber(e.target.value))
      }
    }
  }
</script>

如果没有成功，同样的事情也会发生。

谁能告诉我怎么回事？

Answer 1

正如@ohgodwhy 在 cmets 中提到的：

您在需要 this.value 的组件中缺少 prop 定义，因此它不是响应式的。