Для интеграции 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. Вы можете расширить его функционал в соответствии с вашими требованиями и особенностями проекта.