Getting started with Aurelia Store and localStorageMiddleware

I’m having trouble getting started with Aurelia(v1) Store & localStorageMiddleware. Just following the docs I got stuck in the: Injecting the store and creating a subscription code example.

I have defined the State entity and initialState, registered the plugin and subscribed to the stream of states. Somehow I managed to get a Uncaught (in promise) TypeError: this.store.state is undefined

Additionally when trying to follow the instructions in the docs below to set up localStorageMiddleware I get another error to the console: Inner Error: Message: this.store.registerMiddleware is not a function

These are probably connected due to something being off…

Is there an example repo/gist that would cover using Store & localStorageMiddleware out there? That way I could hopefully find solutions to my problems :slight_smile:

it sounds like this.store is undefined so perhaps you’re not injecting the store in your constructor? can you show a minimal example of what you were trying?

1 Like

I’m just trying to follow the examples in the docs. I managed to recreate the first problem TypeError: this.store is undefined in a new blank au1 project in a codesandbox:

I’m not sure what I’m missing…

The problem seems related to how CodeSandbox handles ts decorators, or at least that environment how the App is setup.

In your example, in the file app.ts, if you switch @autoinject with @inject(Store) everything works as expected. But funny enough that shouldn’t be the case with your local installation. May I ask how you scaffolded your initial application? Or even better, can you share it via GitHub so I can see what else might has gone wrong?

1 Like

Thanks for your time looking into this! I Got the CodeSandbox running nicely. This helped me to narrow down the side effects in my app.ts.

It turned out to be a very silly mistake on my part - I had messed up the order of injected dependencies :face_with_head_bandage:

Anyways I went ahead and did some basic operations with store to make sure I get them working so I’ll share this CodeSandbox here aswell, maybe it helps someone along the way

2 Likes

The docs and examples show how to store all of the information under a single local storage key.

Lets say that the app has several different components that rely on local storage. It would make sense to me to separate these values and store them under different local storage keys. Would this be a good practice with Aurelia Store? If so, how would one go about implementing it?

well the base localstorage middleware covers just a very basic use case. everything more specific would best be handled with your own custom middleware

1 Like