vue.js - Vue + Vuex : input value not set by store if no store change

Question

<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))
      }
    },
    props: ['value']
  }
</script>

只要 formatPhoneNumber(value) 生成不同的值，一切都会正常工作，但是一旦达到最大长度(因为 formatPhoneNumber('xx xx xx xx xx 不管怎样' ) == 'xx xx xx xx xx')，发出的值与当前存储的值相同。

这完全没问题，只是状态不会改变，组件不会重新渲染，因此不会调用 formattedValue() 。

因此，我最终在商店中得到 xx xx xx xx xx，但输入显示 xx xx xx xx xx 无论如何，因为本地输入值与商店不同.

如何避免这种意外行为？将 formatPhoneNumber() 移动到商店并不能解决我的问题，因为它仍然可以防止突变，并且仅在 formattedValue() 中使用 formatPhoneNumber()会让我最终在商店中得到一个未格式化的值，这也不是我想要的。

为什么 Vue 的带有动态 value 集的 input 仍然管理本地状态？

Answer 1

为了实现你想要的(我认为)，你可以将 formatValue 方法更改为

formatValue(e) {
   this.$emit('input', e.target.value = formatPhoneNumber(e.target.value));
}

以便将输入设置为格式化的电话号码值。无论怎样，您都将覆盖输入产生的内容，因此您也可以在输入事件上执行此操作。