Как использовать TypeScript для интеграции localStorage в Pinia?

Как можно исправить код, чтобы объект clientsData не оставался undefined в состоянии Pinia при интеграции localStorage в TypeScript?
  • 27 апреля 2024 г. 15:40
Ответы на вопрос 2
Для интеграции localStorage в Pinia с использованием TypeScript можно использовать следующий пример:

```typescript
import { defineStore } from 'pinia';

interface Client {
  id: number;
  name: string;
}

export const useClientStore = defineStore({
  id: 'client',
  state: () => ({
    clientsData: localStorage.getItem('clientsData') || []
  }),
  getters: {
    clients: (state) => state.clientsData as Client[]
  },
  actions: {
    saveClient(client: Client) {
      const clients = this.clientsData as Client[];
      clients.push(client);
      this.clientsData = clients;
      localStorage.setItem('clientsData', JSON.stringify(this.clientsData));
    }
  }
});
```

Чтобы исправить проблему с объектом `clientsData`, который может оставаться undefined, можно внести следующие изменения в код:

```typescript
state: () => ({
    clientsData: JSON.parse(localStorage.getItem('clientsData') || '[]') as Client[]
}),
```

Таким образом, если в localStorage не были найдены данные, будет возвращен пустой массив, помеченный как массив объектов типа `Client`.
export const useClientsStore = defineStore('client', () => {
  const clientsData = ref()
}


// MainView.vue
const store = useClientsStore();

onMounted(() => {
 const clientJson: string | null = localStorage.getItem('clients')
store .clientsData  = (clientJson !== null ? JSON.parse(clientJson) : [])
})


Так и не смог осилить логику того, зачем в сторе у тебя лежит то, что там лежит, тем более с вызовами методов)

А вообще подобные штуки легко без стора сделать. - просто в компоненте в онМаунте провести чтение с локалстораджа, и сохранить в локальной переменной в компоненте, и отрендерить ( или произвести др действия )
Похожие вопросы