Примитивное свойство

Если передать примитивное свойство в виде примитива, то реактивность у нас не получится обеспечить. Я решила воспользоваться тем, что объекты - это ссылки, и попробовала обернуть примитив в объект, и это сработало.

Я вдохновлялась функцией ref, предоставляемой во Vue 2. Docs (opens new window)

Изменение через компонент

Класс

class PrimitiveProperty {
  someString = {
    value: 'someString',
  };
}

const instance = new PrimitiveProperty()

export default instance;

Компоненты

PrimitivePropertyOne

<template>
  <div class="component-block">
    <span class="name">PrimitivePropertyOne</span>
    <span>Value: {{ someString.value }}</span><br/>
    <button @click="changeValue">Change value</button>
  </div>
</template>

<script>
import PrimitiveProperty from '@example-services/PrimitiveProperty';

export default {
  data() {
    return {
      someString: PrimitiveProperty.someString,
    };
  },
  methods: {
    changeValue() {
      this.someString.value = 'someAnotherString';
    },
  },
}
</script>

PrimitivePropertyTwo

<template>
  <div class="component-block">
    <span class="name">PrimitivePropertyTwo</span>
    <div>{{ someString }}</div>
  </div>
</template>

<script>
import PrimitiveProperty from '@example-services/PrimitiveProperty';

export default {
  data() {
    return {
      someString: PrimitiveProperty.someString,
    };
  },
};
</script>

Результат

PrimitivePropertyOne Value: someString

PrimitivePropertyTwo

{ "value": "someString" }

Изменение через метод

Чтобы сохранился контекст класса, при передаче метода его нужно забиндить на класс

Класс

class PrimitivePropertyWithMethod {
  someString = {
    value: 'someString',
  };

  changeValue() {
    this.someString.value = 'anotherString';
  }
}

const instance = new PrimitivePropertyWithMethod();

export default instance;

Компонент

WARNING

Обратите внимание на то, что метод встраивается в секцию data, это связано с уничтожением инстансов (об этом подробнее в секции Использование)

<template>
  <div class="component-block">
    <span class="name">PrimitivePropertyThree</span>
    <span>Value: {{ someString.value }}</span><br/>
    <button @click="changeValue">Change value</button>
  </div>
</template>

<script>
import PrimitivePropertyWithMethod from '@example-services/PrimitivePropertyWithMethod';

export default {
  data() {
    return {
      someString: PrimitivePropertyWithMethod.someString,
      changeValue: PrimitivePropertyWithMethod.changeValue.bind(PrimitivePropertyWithMethod),
    };
  },
}
</script>

Результат

PrimitivePropertyThree Value: someString

PrimitivePropertyFour

{ "value": "someString" }