Do not use useStorage for root state

This commit is contained in:
Jan Bader 2022-02-11 22:03:26 +00:00
parent 45389e01be
commit f6cb6d4163
3 changed files with 30 additions and 20 deletions

View File

@ -1,4 +1,3 @@
import { useStorage } from "@vueuse/core";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { useAPI } from "./api"; import { useAPI } from "./api";
import { useAccountStore } from "./budget-account"; import { useAccountStore } from "./budget-account";
@ -9,7 +8,7 @@ interface State {
} }
export const useBudgetsStore = defineStore('budget', { export const useBudgetsStore = defineStore('budget', {
state: () => useStorage<State>('budget', { state: () => ({
CurrentBudgetID: null, CurrentBudgetID: null,
}), }),
getters: { getters: {

View File

@ -1,13 +1,17 @@
import { useStorage } from '@vueuse/core'; import { StorageSerializers, useStorage } from '@vueuse/core';
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { useAPI } from './api'; import { useAPI } from './api';
interface State { interface State {
Token: string | null Session: Session | null
User: string | null
Budgets: Map<string, Budget>, Budgets: Map<string, Budget>,
} }
interface Session {
Token: string
User: string
}
export interface Budget { export interface Budget {
ID: string ID: string
Name: string Name: string
@ -15,23 +19,24 @@ export interface Budget {
} }
export const useSessionStore = defineStore('session', { export const useSessionStore = defineStore('session', {
state: () => useStorage<State>('session', { state: () => ({
Token: null, Session: useStorage<Session>('session', null, undefined, { serializer: StorageSerializers.object }),
User: null, Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>()),
Budgets: new Map<string, Budget>(),
}), }),
getters: { getters: {
BudgetsList: (state) => [ ...state.Budgets.values() ], BudgetsList: (state) => [ ...state.Budgets.values() ],
AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Token}), AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session.Token}),
LoggedIn: (state) => state.Token != null, LoggedIn: (state) => state.Session != null,
}, },
actions: { actions: {
setTitle(title : string) { setTitle(title : string) {
document.title = "Budgeteer - " + title; document.title = "Budgeteer - " + title;
}, },
loginSuccess(x : any) { loginSuccess(x : any) {
this.User = x.User; this.Session = {
this.Token = x.Token; User: x.User,
Token: x.Token,
},
this.Budgets = x.Budgets; this.Budgets = x.Budgets;
}, },
async login(login: any) { async login(login: any) {

View File

@ -2,21 +2,27 @@ import { useStorage } from "@vueuse/core";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
interface State { interface State {
ShowMenu: boolean | null, Menu: MenuSettings
ExpandMenu: boolean, }
interface MenuSettings {
Show: boolean | null,
Expand: boolean | null,
} }
export const useSettingsStore = defineStore('settings', { export const useSettingsStore = defineStore('settings', {
state: () => useStorage<State>('settings', { state: () => ({
ShowMenu: null, Menu: useStorage<MenuSettings>('settings', {
ExpandMenu: false, Show: null,
Expand: false,
}),
}), }),
actions: { actions: {
toggleMenu() { toggleMenu() {
this.ShowMenu = !this.ShowMenu; this.Menu.Show = !this.Menu.Show;
}, },
toggleMenuSize() { toggleMenuSize() {
this.ExpandMenu = !this.ExpandMenu; this.Menu.Expand = !this.Menu.Expand;
}, },
} }
}); });