diff --git a/pages/index/index.uvue b/pages/index/index.uvue index 9501ad25b25c98c74b8d50eec8a75384260c3541..e850b23d5a36b47b71a3227473220e44d0cc0bcb 100644 --- a/pages/index/index.uvue +++ b/pages/index/index.uvue @@ -622,6 +622,11 @@ export default { name: 'toRaw', url: 'to-raw/to-raw' }, + { + id: 'trigger-ref', + name: 'triggerRef', + url: 'trigger-ref/trigger-ref' + }, ] } ] as Page[] diff --git a/pages/reactivity/advanced/trigger-ref/trigger-ref.test.js b/pages/reactivity/advanced/trigger-ref/trigger-ref.test.js index 5f85adbe63fdce21d27372f679f519284a863626..80866d21a3bcf1b0f06960c3ba8afa6cdaeec8db 100644 --- a/pages/reactivity/advanced/trigger-ref/trigger-ref.test.js +++ b/pages/reactivity/advanced/trigger-ref/trigger-ref.test.js @@ -1,4 +1,4 @@ -const PAGE_PATH = '/pages/composition-api/reactivity/trigger-ref/trigger-ref' +const PAGE_PATH = '/pages/reactivity/advanced/trigger-ref/trigger-ref' describe('triggerRef', () => { let page = null @@ -8,16 +8,16 @@ describe('triggerRef', () => { }) it('basic', async () => { const stateCount = await page.$('#state-count') - expect(await stateCount.text()).toBe('state.count: 0') + expect(await stateCount.text()).toBe('0') const incrementStateCountBtn = await page.$('#increment-state-count-btn') await incrementStateCountBtn.tap() - expect(await stateCount.text()).toBe('state.count: 0') + expect(await stateCount.text()).toBe('0') const triggerRefStateBtn = await page.$('#trigger-ref-state-btn') await triggerRefStateBtn.tap() - expect(await stateCount.text()).toBe('state.count: 1') + expect(await stateCount.text()).toBe('1') }) }) \ No newline at end of file diff --git a/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue b/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue index 5697945944920b79e690ad9231d0578db1fcc88c..9393d1d1728f5d1df5c3479436d221a1a337d812 100644 --- a/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue +++ b/pages/reactivity/advanced/trigger-ref/trigger-ref.uvue @@ -1,25 +1,34 @@ <template> <view class="page"> - <text id="state-count" class="mb-10">state.count: {{ state.count }}</text> - <button id="increment-state-count-btn" class="mb-10" @click="incrementStateCount">increment - state.count</button> - <button id="trigger-ref-state-btn" @click="triggerRefState">trigger state</button> + <view class="flex justify-between flex-row mb-10"> + <text>state.count:</text> + <text id="state-count">{{ state.count }}</text> + </view> + <button + id="increment-state-count-btn" + class="mb-10" + @click="incrementStateCount"> + increment state.count + </button> + <button id="trigger-ref-state-btn" @click="triggerRefState"> + trigger state + </button> </view> </template> -<script setup> - type State = { - count: number - } - const state = shallowRef({ - count: 0 - } as State) +<script setup lang="uts"> +type State = { + count: number +} +const state = shallowRef({ + count: 0 +} as State) - const incrementStateCount = () => { - state.value.count++ - } +const incrementStateCount = () => { + state.value.count++ +} - const triggerRefState = () => { - triggerRef(state) - } -</script> \ No newline at end of file +const triggerRefState = () => { + triggerRef(state) +} +</script> diff --git a/refactor_options-API-composition-API-correspondence.md b/refactor_options-API-composition-API-correspondence.md index 4eea8068ab932286e0e8c73ec01b1129eda904ba..5016e2c3b1bc9cc0b83c1efebad6f5c00857089c 100644 --- a/refactor_options-API-composition-API-correspondence.md +++ b/refactor_options-API-composition-API-correspondence.md @@ -149,7 +149,7 @@ function transform(fileInfo, api) { - [x] shallowReadonly - [x] shallowRef - [x] toRaw -- [ ] triggerRef +- [x] triggerRef ## directives