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

Question

[Esm322]

Возникла проблема с интеграцией localStorage в Pinia с использованием TypeScript. Когда я извлекаю clientsData из pinia дл рендера клиентов, то получаю undefined в pinia. Не могу понять в чём ошибка:

// clients.ts useClientsStore Pinia

import { ref } from 'vue'
import { defineStore } from 'pinia'
import idCreation from '@/helpers/idCreation'
import type { IContacts } from '@/models/ObjectModels'

export const useClientsStore = defineStore('client', () => {
  const clientJson: string | null = localStorage.getItem('clients')
  const clientsData = ref(clientJson !== null ? JSON.parse(clientJson) : [])

  function saveClients(): void {
    localStorage.setItem('clients', JSON.stringify(clientsData))
  }

  function addClient(
    firstName: string,
    secondName: string,
    thirdName: string,
    contacts: IContacts[]
  ): void {
    clientsData.value.push({
      id: idCreation(clientsData.value),
      firstName,
      secondName,
      thirdName,
      date: {
        newDate: new Date(),
        nowDate: Date.now()
      },
      edit: {
        newEdit: new Date(),
        nowEdit: Date.now()
      },
      contacts
    })

    saveClients()
  }

  return {
    clientsData,
    saveClients,
    addClient,
  }
})

// MainView.vue 

import { storeToRefs } from 'pinia';
import { useClientsStore } from '@/stores/clients';

const store = useClientsStore();
const { clientsData, searchValueStore } = storeToRefs(store);

console.log(clientsData) // выводит массив объектов, но в pinia state значение clientsData: undefined

В логах показывает массив объектов, а в setup MainView и state Pinia указывает undefined. Подскажите, пожалуйста, по какой причине это происходит?

Answer 1

[MaxRyazan]

export const useClientsStore = defineStore('client', () => {
  const clientsData = ref()
}

// MainView.vue

const store = useClientsStore();

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

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

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

Comments

[Esm322]

Спасибо, помогло. Засунул в стор, чтобы разобраться как работает typescript со стором