javascript - 在 Svelte 自定义方法中使用 getter/setter

Question

在自定义方法中使用 get/set 对时，我无法编译我的 slim 组件。这不支持吗？还是我做错了什么？

例子:

假设我想要一个显示名称的组件，并且我想使用它来设置名称。 com.name = 'The new name';
但是，我只希望组件在名称中没有空格的情况下使用该名称。

<h1>Hello {{name}}!</h1>

<script>
    export default {
        data () {
            return {
                name: 'The Name',
            }
        },
        methods: {
            get displayName() {
                return this.get('name'); 
            },
            set displayName(val) {
                if (val.indexOf(' ') < 0) {
                    this.set('name', val);
                }
            }
        }
    }
</script>

问题是当我尝试编译它时，它说有一个重复的键。

    Duplicate property 'displayName'

    49:             return this.get('name');
    50:         },
    51:         set displayName(val) {

这是一个 REPL - https://svelte.technology/repl?version=1.13.2&gist=0eeab5717526694139ba73eae766bb30

我在文档中没有看到任何关于此的内容。我不能使用二传手，但我希望能够。

Answer 1

tl;博士这可以通过 wrapper object

这里的错误消息有点令人困惑——问题不是重复属性，是您不能在 methods 中使用 getter 和 setter。 , 在任何情况下都与 data 是分开的填充组件内部状态的对象(以及在实例化时提供的数据和可能存在的任何计算值)。我已经为那个 here 开了一个问题。 .
data它本身也不能有 getter 和 setter——或者说可以，但它们不会被使用，因为从你的 data 返回的对象函数与内部状态对象不同(否则我们都可能遇到与突变相关的错误)。

但实际上创建一个允许您获取和设置组件数据的包装器对象相当容易:

function wrap (component) {
  var wrapper = {};
  var data = component.get();

  Object.keys(data).forEach(key => {
    Object.defineProperty(wrapper, key, {
      get() {
        return component.get()[key];
      },
      set(value) {
        component.set({ obj[key]: value });
      }
    })
  });

  return wrapper;
}

var component = new Component({...});
var wrapper = wrap(component);

wrapper.name = 'Rich';

你甚至可以做 component.data = wrap(component)如果你愿意——那么你可以操纵 component.data.name等等。

我整理了一个 small repo演示该方法 — see it in action here .