feat(vue): allow dynamic Store instance

docs/framework/vue/reference/functions/shallow.md

@@ -11,7 +11,7 @@ title: shallow
 function shallow<T>(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
 

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?
 

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][T extends any ? 0 : never]
 
 export function useStore<TState, TSelected = NoInfer<TState>>(
-  store: Store<TState, any>,
+  store: MaybeRefOrGetter<Store<TState, any>>,
   selector?: (state: NoInfer<TState>) => TSelected,
 ): Readonly<Ref<TSelected>>
 export function useStore<TState, TSelected = NoInfer<TState>>(
-  store: Derived<TState, any>,
+  store: MaybeRefOrGetter<Derived<TState, any>>,
   selector?: (state: NoInfer<TState>) => TSelected,
 ): Readonly<Ref<TSelected>>
 export function useStore<TState, TSelected = NoInfer<TState>>(
-  store: Store<TState, any> | Derived<TState, any>,
+  store:
+    | MaybeRefOrGetter<Store<TState, any>>
+    | MaybeRefOrGetter<Derived<TState, any>>,
   selector: (state: NoInfer<TState>) => TSelected = (d) => d as any,
 ): Readonly<Ref<TSelected>> {
-  const slice = ref(selector(store.state)) as Ref<TSelected>
+  const slice = ref<TSelected>(selector(toValue(store).state))
 
   watch(
-    () => store,
+    () => toValue(store),
     (value, _oldValue, onCleanup) => {
       const unsub = value.subscribe(() => {
         const data = selector(value.state)

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 (
+          <div>
+            <p>Store: {storeVal.value}</p>
+            <button onClick={() => (store.value = createStore(10))}>
+              Update store
+            </button>
+          </div>
+        )
+      }
+    })
+
+    const { getByText } = render(Comp)
+    expect(getByText('Store: 0')).toBeInTheDocument()
+
+    await user.click(getByText('Update store'))
+    await waitFor(() => expect(getByText('Store: 10')).toBeInTheDocument())
+  })
 })
 
 describe('shallow', () => {