diff --git a/docs/framework/vue/reference/functions/shallow.md b/docs/framework/vue/reference/functions/shallow.md index 11cc076d..66b191b7 100644 --- a/docs/framework/vue/reference/functions/shallow.md +++ b/docs/framework/vue/reference/functions/shallow.md @@ -11,7 +11,7 @@ title: shallow function shallow(objA, objB): boolean ``` -Defined in: [index.ts:47](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L47) +Defined in: [index.ts:49](https://github.com/TanStack/store/blob/main/packages/vue-store/src/index.ts#L49) ## Type Parameters diff --git a/docs/framework/vue/reference/functions/usestore.md b/docs/framework/vue/reference/functions/usestore.md index 59c67731..9b15651e 100644 --- a/docs/framework/vue/reference/functions/usestore.md +++ b/docs/framework/vue/reference/functions/usestore.md @@ -25,7 +25,7 @@ Defined in: [index.ts:12](https://github.com/TanStack/store/blob/main/packages/v #### store -`Store`\<`TState`, `any`\> +`MaybeRefOrGetter`\<`Store`\<`TState`, `any`\>\> #### selector? @@ -53,7 +53,7 @@ Defined in: [index.ts:16](https://github.com/TanStack/store/blob/main/packages/v #### store -`Derived`\<`TState`, `any`\> +`MaybeRefOrGetter`\<`Derived`\<`TState`, `any`\>\> #### selector? diff --git a/packages/vue-store/src/index.ts b/packages/vue-store/src/index.ts index 0d3dfaaf..313dbc52 100644 --- a/packages/vue-store/src/index.ts +++ b/packages/vue-store/src/index.ts @@ -1,6 +1,6 @@ -import { readonly, ref, toRaw, watch } from 'vue-demi' +import { readonly, ref, toRaw, toValue, watch } from 'vue-demi' import type { Derived, Store } from '@tanstack/store' -import type { Ref } from 'vue-demi' +import type { MaybeRefOrGetter, Ref } from 'vue-demi' export * from '@tanstack/store' @@ -10,21 +10,23 @@ export * from '@tanstack/store' export type NoInfer = [T][T extends any ? 0 : never] export function useStore>( - store: Store, + store: MaybeRefOrGetter>, selector?: (state: NoInfer) => TSelected, ): Readonly> export function useStore>( - store: Derived, + store: MaybeRefOrGetter>, selector?: (state: NoInfer) => TSelected, ): Readonly> export function useStore>( - store: Store | Derived, + store: + | MaybeRefOrGetter> + | MaybeRefOrGetter>, selector: (state: NoInfer) => TSelected = (d) => d as any, ): Readonly> { - const slice = ref(selector(store.state)) as Ref + const slice = ref(selector(toValue(store).state)) watch( - () => store, + () => toValue(store), (value, _oldValue, onCleanup) => { const unsub = value.subscribe(() => { const data = selector(value.state) diff --git a/packages/vue-store/tests/index.test.tsx b/packages/vue-store/tests/index.test.tsx index cca51b63..63848ad8 100644 --- a/packages/vue-store/tests/index.test.tsx +++ b/packages/vue-store/tests/index.test.tsx @@ -1,6 +1,6 @@ import { describe, expect, it, test, vi } from 'vitest' // @ts-expect-error We need to import `h` as it's part of Vue's JSX transform -import { defineComponent, h } from 'vue-demi' +import { defineComponent, h, ref } from 'vue-demi' import { render, waitFor } from '@testing-library/vue' import { Store } from '@tanstack/store' import { userEvent } from '@testing-library/user-event' @@ -79,6 +79,34 @@ describe('useStore', () => { await user.click(getByText('Update ignored')) expect(getByText('Number rendered: 2')).toBeInTheDocument() }) + + it('allows us to use a dynamic store', async () => { + function createStore(count: number) { + return new Store({ count }) + } + + const Comp = defineComponent(() => { + const store = ref(createStore(0)) + const storeVal = useStore(store, (state) => state.count) + + return () => { + return ( +
+

Store: {storeVal.value}

+ +
+ ) + } + }) + + const { getByText } = render(Comp) + expect(getByText('Store: 0')).toBeInTheDocument() + + await user.click(getByText('Update store')) + await waitFor(() => expect(getByText('Store: 10')).toBeInTheDocument()) + }) }) describe('shallow', () => {