# Getting started with Aurelia Store and localStorageMiddleware

**URL:** <https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666>\
**Category:** Help Requests\
**Created:** [March 4, 2022, 5:57pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666 "2022-03-04T17:57:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [March 4, 2022, 5:57pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/1 "2022-03-04T17:57:10Z")

</div>

I’m having trouble getting started with Aurelia(v1) Store & localStorageMiddleware. Just following the [docs](https://aurelia.io/docs/plugins/store#introduction) 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](https://aurelia.io/docs/plugins/store#subscribing-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 🙂

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 4, 2022, 7:23pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/2 "2022-03-04T19:23:24Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [March 5, 2022, 12:41pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/3 "2022-03-05T12:41:10Z")

</div>

I’m just trying to follow the examples in the [docs](https://aurelia.io/docs/plugins/store#getting-started). I managed to recreate the first problem `TypeError: this.store is undefined` in a new blank au1 project in a codesandbox:

> **[Aurelia TypeScript Sandbox (forked) - CodeSandbox](https://codesandbox.io/s/aurelia-typescript-sandbox-forked-l4kpk5?file=%2Fsrc%2Fapp.ts)**
>
> A CodeSandbox.io template for Aurelia apps that uses TypeScript.

I’m not sure what I’m missing…

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 5, 2022, 8:04pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/4 "2022-03-05T20:04:33Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [March 7, 2022, 4:54pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/5 "2022-03-07T16:54:24Z")

</div>

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 🤕

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

> **[Aurelia TypeScript Sandbox - aurelia-store - CodeSandbox](https://codesandbox.io/s/aurelia-typescript-sandbox-aurelia-store-iu0r35)**
>
> Getting started with aurelia-store and localStorageMiddleware. Try to refresh the application and see how it populates the state in the browsers localStorage.

---

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [March 11, 2022, 3:04pm UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/6 "2022-03-11T15:04:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [March 12, 2022, 7:01am UTC](https://discourse.aurelia.io/t/getting-started-with-aurelia-store-and-localstoragemiddleware/4666/7 "2022-03-12T07:01:42Z")

</div>

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