I am using vue vite. I need to use property decorator. But not working Object.defineProperty
. in fact it is not trigger getter
and setter
functions. sample code is here. How can I solve this?
<template>
<div>
<button @click="change">değiştir</button>
<div>
{{ store.getUsername() }}
</div>
<div>
<input type="text" v-model="text" />
</div>
</div>
</template>
<script setup lang="ts">
function State(target: any, propertyKey: string) {
let value = target[propertyKey];
const getter = () => {
console.log('store', value);
return value;
};
const setter = (newValue: any) => {
console.log(`Changing value of ${propertyKey} from ${value} to ${newValue}`);
value = newValue;
};
Object.defineProperty(target, propertyKey, {
get: getter,
set: setter,
enumerable: true,
configurable: true,
});
}
class GlobalStore {
constructor() {}
@State
username = 'test';
setUsername(data: string): void {
this.username = data;
}
getUsername(): string {
return this.username;
}
}
const store = new GlobalStore();
import { ref } from 'vue';
const text = ref(' ');
function change() {
console.log(store.getUsername());
store.username = text.value;
store.setUsername(text.value);
}
</script>
<style scoped></style>