0

I need to share a date from a component in Svelte to several different components which are not children of the component. If they were all children I think I would use 'setContext' and 'getContext'. The best way I have come across is using a store, however when I use the store it does not appear to be saving a 'Date' but a 'Writable'. When I try to get values from the date it will not let me.

store.ts

import {writable} from "svelte/store"

export const date = writable<Date>(new Date())

component.ts

import { date } from "./store";
var hour = date.getHours();
let calendarDate = date.toISOString().split('T')[0]

I get an error "Property 'getHours' does not exist on type 'Writable'" and "Property 'toISOString' does not exist on type 'Writable'"

Is there a way to fix this or a better way to pass a date from one component to multiple using state, context, or something else I'm not aware of?

I tried using a store to save the date and was expecting the ability to be able to view and update the date in other components.

H.B.
  • 166,899
  • 29
  • 327
  • 400
Avi4nFLu
  • 152
  • 8

2 Answers2

0

You only need the store if you want to update components reactively. If you do not need that feature, you can just not use a store.

To read the store value only once you can use the get function from 'svelte/store'. To change the value or update it, you can use the functions on the store itself (set/update, differences are explained here).

import { date } from "./store";
import { get } from 'svelte/store';

const $date = get(date);
var hour = $date.getHours();
let calendarDate = $date.toISOString().split('T')[0]

In a component one can use special $-syntax to read and write stores more conveniently.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • I believe it does need to be reactive. In component.ts I am setting a date which will then need to be saved in the store so it can be used by another component on the page. I will end up using it in a fetch call, but for now I am just trying to pass it to the component. – Avi4nFLu Jan 30 '23 at 20:50
  • Usage is completely independent from reactivity. You have a global variable that can read and written anywhere, the only difference would be that the a Svelte component would know *when* the variable is changed. – H.B. Jan 30 '23 at 20:54
0

Thank you for your help. I was able to fix the problem with your help and looking through the docs again. Here is what I did to fix it. In component1.svelte I was able to import and reference it using the $ syntax. I was also able to set the date. In component2.svelte I just needed to subscribe to the data.

component1.svelte

<script>
    import { dateStore } from "./store";    
    let date = $dateStore;
    var hour = date.getHours();
    let calendarDate = date.toISOString().split('T')[0]

    const handleGo = () => {
        let temp = new Date(calendarDate)
        selectedDate = temp.toLocaleDateString('en-US', options);
        dateStore.set(temp)
    };
</script>

componenet2.svelte

<script>
    import { dateStore } from '../../../lib/store';
    
    let date;
    dateStore.subscribe((val) => date = val)
    
    
</script>


<h1>{date}</h1>
Avi4nFLu
  • 152
  • 8
  • This is not a forum, do *not* use answers to "respond" to people, it's not how this site works. Also, there is no need to use `subscribe` in components, use [reactive statements](https://svelte.dev/docs#component-format-script-3-$-marks-a-statement-as-reactive) or the store directly, that way subscriptions are cleaned up again when the component is removed. Not doing so leads to memory leaks. – H.B. Jan 30 '23 at 22:02
  • `dateStore.set(temp)` is just `$dateStore = temp` and the entire second component is just `

    {$dateStore}

    ` with nothing else but the import.     – H.B. Jan 30 '23 at 22:05
  • Thanks again for your help. I was able to change those to the reactive components as suggested. I did not finish the second component in my example, I just put the reference in an

    so I could easily see the value changed. I am going to use the date for a fetch call.

     – Avi4nFLu Jan 31 '23 at 13:01