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

Для интеграции localStorage в состояние Pinia с использованием TypeScript требуется выполнить несколько шагов:

1. Установите Pinia, если еще этого не сделали:

npm install pinia

2. Создайте хранилище Pinia. Например, файл store.ts:

import { defineStore } from 'pinia';

export const useMyStore = defineStore({
  id: 'myStore',
  state: () => ({
    data: localStorage.getItem('myData') || 'defaultData',
  }),
  actions: {
    setData(data: string) {
      this.data = data;
      localStorage.setItem('myData', data);
    },
  },
});

3. Используйте созданное хранилище в приложении Vue:

<template>
  <div>
    <p>{{ myData }}</p>
    <input v-model="newData" type="text" />
    <button @click="saveData">Save Data</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useMyStore } from './store';

export default defineComponent({
  setup() {
    const store = useMyStore();
    
    const myData = store.data;

    const newData = '';

    const saveData = () => {
      store.setData(newData);
    };

    return {
      myData,
      newData,
      saveData,
    };
  },
});
</script>

4. Теперь состояние хранилища myStore будет инициализировано из localStorage, а при вызове setData данные будут сохранены в localStorage.

Это базовый пример интеграции localStorage в состояние Pinia с использованием TypeScript. Вы можете расширить его функционал в соответствии с вашими требованиями и особенностями проекта.