在Svelte Custom方法中使用getter/setter

Question

在自定义方法中使用get/set对时,我无法编译我的svelte组件.这不受支持吗？或者我做错了什么？

例:

假设我想要一个显示名称的组件,并且我想使用设置名称. 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

我在文档中没有看到任何关于此的内容.我可以不使用setter,但我希望能够.

Answer 1

tl; dr这可以使用包装器对象

这里的错误消息有点令人困惑 - 这不是重复属性是一个问题,是你不能有getter和setter methods,它在任何情况下都与data填充组件内部状态的对象(以及提供的数据)分开在实例化和任何计算值可能有).我在这里打开了一个问题.

它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等等.

我已经整理了一个小型回购演示了这种方法 - 在这里看到它的实际应用.