-
Notifications
You must be signed in to change notification settings - Fork 0
/
HellowWorldComposition.vue
66 lines (48 loc) · 1.62 KB
/
HellowWorldComposition.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
<div>
<h1>Vue Composition API</h1>
<input v-model="shalom"/>
<p>{{ shalom }}</p>
<p>{{myAry}} count {{myAryCount}}<button @click="pushMyAry" >pushMyAry</button></p>
<p>{{olam}}</p>
<input v-model="myLocalStorage.lc" v-on:keyup="myLocalStorageChanged" /> {{myLocalStorageLc}}
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , onUnmounted, reactive} from '@vue/composition-api'
import {params} from "./Store"
import {CompositHelper} from "./CompositHelper"
export default defineComponent({
setup () {
const ch = new CompositHelper(params.pw)
// All objects like lists are reactive automaticly by Vue
// no need getComputed
const myAry = ref(params.myAry.ref)
const myLocalStorage = reactive(params.myLocalStorage.ref)
const myLocalStorageChanged=()=>{
params.myLocalStorage.signalRefresh();
}
const pushMyAry=()=>{
params.myAry.ref.push("a")
// The object itself reactive, but the store don't know it has been modified,
params.myAry.signalRefresh()
}
onMounted(()=>{
ch.onMounted()
})
onUnmounted( ()=>{
ch.onUnmounted()
})
return {shalom: ch.getRef(params.shalom),
myAryCount: ch.getRef(params.myAryCount),
olam: ch.getRef(params.olam),
myAry: myAry, pushMyAry,
myLocalStorage,
myLocalStorageLc: ch.getRef(params.myLocalStorageLc),
myLocalStorageChanged};
},
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>