Composing Models
To use other models when define a model, we need to use function to define the model.
import { use } from 'doura';
const countModel = defineModel({
state: {
count: 0,
},
})
const userModel = defineModel(() => {
const counter = use(countModel)
return {
state: {
name: 'alice',
isLogin: false,
},
actions: {
login() {
counter.count++
this.isLogin = true
},
},
views: {
loginCount() {
return counter.count
},
},
}
})
警告
Note that if you destructure the counter
object, the destructured variables will lose reactivity. It is therefore recommended to always access props in the form of counter.xxx
.
import { use } from 'doura';
const userModel = defineModel(() => {
const counter = use(countModel)
const { count } = counter // ❌ don't destructure
return {
state: {},
views: {
countOne() {
return count; // ⚠️ countOne won't update even count has changed
}
countTwo() {
return counter.count // ✅ always access props by `someModel.xx` in a view function
},
},
}
})
Local Model
when composing a model by use(model)
, if we don't provide a name, the model is isolated and can only get accessed in the current model.
import { use } from 'doura';
const countModel = defineModel({
state: {
count: 0,
},
})
const modelOne = defineModel(() => {
const counter1 = use(countModel)
const counter2 = use(countModel)
return {
state: {
value: 0,
},
}
})
const modelTwo = defineModel(() => {
const counter3 = use(countModel)
return {
state: {
value: 0,
},
}
})
counter1
, counter2
and counter3
are three different instances. They are independent of each other and do not affect each other.
Named Model
If you want to share a model's state among other models, you need use named model.
import { use } from 'doura';
const countModel = defineModel({
state: {
count: 0,
},
})
const modelOne = defineModel(() => {
const counter1 = use('counter', countModel)
return {
state: {
value: 0,
},
}
})
const modelTwo = defineModel(() => {
const counter2 = use('counter', countModel) // counter1 and counter2 point to a same instance as long as they have a same name.
return {
state: {
value: 0,
},
}
})