Handling Vuex Store object changes with localStorage

[nwittwer]

Problem: "Cannot read property 'length' of undefined" (usually for artboards.length).

Current workaround: Try clearing your local storage by opening the DevTools > Application > Local Storage > file:// > and then delete the Reflex key. After reloading the app it should work again.

Cause: This problem typically occurs when the data model for something like artboards has changed, but the view is trying to load data from the localStorage which contains an older format/different properties.

Root cause: Currently we're using the vuex-persist plugin, which saves Vuex Store data in the Electron app's localStorage. When there are changes to the properties or structure of the Vuex Store, this error can occur, because the view is trying to render properties of an object that differ from the localStorage (which was an old copy of the Vuex Store objects).

---

I am not sure how to avoid this problem currently, and am open to ideas.

One workaround solution could be to add an OS-level menu item that allows users to "Clear localStorage". Or to automatically trigger this function and reload the app if such an error is detected.

[nwittwer]

This could be relevant: https://forum.vuejs.org/t/vuex-using-oop-in-state/63806/3

[nwittwer]

Added menu item for clearing Reflex data (localStorage) in https://github.com/nwittwer/reflex/commit/a43348eb0a63425e23e4f037154790dea1409f77

Reflex > Reset Reflex... > OK

[nwittwer]

Related: #205