跳到主要内容

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,
},
}
})