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
67
68
69
70
71
72
73
74
75
76
77
78
79
|
import Vue from 'vue'
export default function ({
idProp = vm => vm.item.id,
} = {}) {
const store = {}
const vm = new Vue({
data () {
return {
store,
}
},
})
// @vue/component
return {
data () {
return {
idState: null,
}
},
created () {
this.$_id = null
if (typeof idProp === 'function') {
this.$_getId = () => idProp.call(this, this)
} else {
this.$_getId = () => this[idProp]
}
this.$watch(this.$_getId, {
handler (value) {
this.$nextTick(() => {
this.$_id = value
})
},
immediate: true,
})
this.$_updateIdState()
},
beforeUpdate () {
this.$_updateIdState()
},
methods: {
/**
* Initialize an idState
* @param {number|string} id Unique id for the data
*/
$_idStateInit (id) {
const factory = this.$options.idState
if (typeof factory === 'function') {
const data = factory.call(this, this)
vm.$set(store, id, data)
this.$_id = id
return data
} else {
throw new Error('[mixin IdState] Missing `idState` function on component definition.')
}
},
/**
* Ensure idState is created and up-to-date
*/
$_updateIdState () {
const id = this.$_getId()
if (id == null) {
console.warn(`No id found for IdState with idProp: '${idProp}'.`)
}
if (id !== this.$_id) {
if (!store[id]) {
this.$_idStateInit(id)
}
this.idState = store[id]
}
},
},
}
}
|
