🍍pinia와 🗂LocalStorage 사용한 데이터 관리

진행하는 프로젝트에서 LocalStorage를 사용하여 간단하게 데이터 구축을 하기로 했다.

또한 vue.js를 사용하고 있기 때문에 상태관리를 pinia를 사용해서 데이터를 관리하기로 했다.

// ModbusMasterEthernet.vue
const setNetwork = () => {
  networkData.value = {
    protocol: selectedProtocol.value,
    ip: inputedIp.value,
    port: inputedPort.value,
    transactionDelay: inputedTD.value,
    timeout: inputedTO.value,
  };
  console.log(networkData.value);
};

ModbusMasterEthernet.vue에서 setNetwork변수의 익명함수가 실행됐을 때 networkData.value의 값을 설정한다. 이 값을 다른 컴포넌트에서 사용하기 위해서는 networkData를 공유하는 방법이 필요하다.

🍍 pinia 상태관리

vuex 혹은 pinia 상태관리를 사용할 수 있다.
Vue3에서 추천하는 상태관리 라이브러리인 Pinia는 메인테이너가 직접 추천하는 상태관리 툴이기 때문에 사용법을 익혀보았다. 사용하다보면 Composition API 스타일로 작업할 때 잘 어울리고 Vuex보단 작업량이 적다는 느낌이 든다.

1. pinia 설치

npm install pinia

2. Pinia Store 만들기

// store.ts

import { createPinia, defineStore } from 'pinia';

const pinia  = createPinia();

// Define store
export const useMyStore = defineStore('myStore', {
  state: () => ({
    networkMasterData: {} as NetworkMasterData,
  }),
  actions: {
    setNetworkMasterData(this: NetworkMasterData, data: NetworkMasterData) {
      this.networkMasterData = data;
    },
  },
});

export { pinia };

// NetworkMasterData type
export interface NetworkMasterData {
  networkMasterData: NetworkMasterData;
  protocol?: string;
  ip?: string;
  port?: number;
  transactionDelay?: number;
  timeout?: number;
}

3. main.ts에 Pinia Store 등록

// main.ts

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.use(pinia);
app.mount('#app');

4. 데이터를 받아올 곳에 Pinia Store 업데이트

// ModbusMasterEthernet.vue

   import { useMyStore } from '../store'; 

   const myStore = useMyStore();

    const setNetwork = () => {
      const data = {
        protocol: selectedProtocol.value,
        ip: inputedIp.value,
        port: inputedPort.value,
        transactionDelay: inputedTD.value,
        timeout: inputedTO.value,
      };

      myStore.setNetworkData(data); 
      console.log(myStore.networkMasterData); 

여기까지 하면 다른 컴포넌트에서 data를 쓸 준비가 완료된다 !

그리고 사용되는 data 값을 저장시키기 위해서 localstorage를 사용할 것이다.
또, 저장되는 값은 배열의 객체로 저장시킬 것이다.

5. 데이터를 사용할 컴포넌트에 Pinia와 Localstorage를 설정

// MME-Recent.vue

<script setup lang="ts">
import { onMounted, watchEffect } from 'vue';
import { useMyStore } from './store'; 

const myStore = useMyStore();
let savedData = ref<SettingType[]>([]);

// pinia store의 networkData 변경 사항 감시하고 데이터가 변경되면 localStorage에 저장
watchEffect(() => {
   // 현재 pinia store에 있는 networkMasterData 값의 변수
  const currentData = myStore.networkMasterData;
	// currentData저장된 데이터 배열에 푸시하고 localStorage에 저장하기 전에 빈 객체인지 확인 (새로고침할 때 localStorage 항목에 빈 객체가 추가되는 것을 방지)
    if (Object.keys(currentData).length > 0) {
        try {
            // string 타입이면 networkData 값을 JSON으로 파싱하고, string이 아니라면 빈 배열을 할당
            const savedDataJSON = localStorage.getItem('networkMasterData');
            savedData = typeof savedDataJSON === 'string' ? JSON.parse(savedDataJSON) : [];
            console.log('savedData:', savedData.value);
            // 추가되는 데이터를 배열의 맨 앞에 추가
            savedData.unshift(currentData);
            // 로컬 스토리지에서 사용하기 위해 문자열로 직렬화
            localStorage.setItem('networkMasterData', JSON.stringify(savedData));
        } catch (error) {
            // 에러처리
            console.error('Error saving data to localStorage:', error);
        }
    }
});
</script>

6. 재로딩 시 스토리지 업데이트

여기서 끝이 아닌, 페이지를 재로딩해도 템플릿이 화면에 남아있도록 하기 위해 스토리지에 데이터를 저장하고 페이지를 로드할 때 해당 데이터를 검색하여 초기화한다.
loadData 함수의 로직은 다음과 같다.
1. 데이터 로드: 페이지가 로드될 때 로컬 스토리지에서 데이터를 검색한다.
2. 데이터 초기화: 검색된 데이터를 저장할 변수에 할당한다.
3. 템플릿에 데이터 표시: 변수에 할당된 데이터를 템플릿에서 사용하여 화면에 표시한다.

<script setup lang="ts">
// 데이터 로드 함수
const loadData = () => {
    try {
        const savedDataJSON = localStorage.getItem('networkMasterData');
        if (savedDataJSON) {
            savedData.value = JSON.parse(savedDataJSON);
        }
    } catch (error) {
        console.error('Error loading data from localStorage:', error);
    }
};
// 페이지가 로드될 때 데이터 로드 실행
onMounted(() => {
    loadData();
});
</script>

<template>
<div v-for="(data, i) in savedData" :key="i" v-if="savedData && savedData.length > 0">
    <q-card class="my-card bg-secondary text-white">
        <q-card-section>
            <div class="text-h6">{{ data.protocol }}</div>
            <div class="text-subtitle2">{{ data.ip }}</div>
            <div class="text-subtitle2">[Port] {{ data.port }}</div>
            <div class="text-subtitle2">[Transaction Delay] {{ data.transactionDelay }}</div>
            <div class="text-subtitle2">[Timeout] {{ data.timeout }}</div>
        </q-card-section>
 </template>
        

텍스트로컬스토리지에 저장된 화면 !
배열에 객체로 잘 쌓인당.

지금까지 최근 항목 저장을 위해서 열심히 화면에 뿌려주었다 !!

7. DELETE 및 OPEN 기능 추가

<script setup lang="ts">
import { ref, watchEffect, onMounted } from 'vue';
import { useMyStore } from '../store/store';
import { useToggleStore } from '../store/modules/settingtoggle';

const deleteCard = (index: number) => {
        // savedData 배열에서 선택된 항목으로부터 1개 삭제
        savedData.value.splice(index, 1);

        // 해당 로컬 저장소 값도 제거
        const savedDataJSON = localStorage.getItem('networkMasterData');
        if (savedDataJSON) {
            const parsedData = JSON.parse(savedDataJSON) as SettingType[];
            parsedData.splice(index, 1);
            localStorage.setItem('networkMasterData', JSON.stringify(parsedData));
        }
    
};

const openCard = () => {
    const toggleStore = useToggleStore();
    toggleStore.falseSetting();
}
</script>

<template>
    <div v-for="(data, i) in savedData" :key="i">
        <q-card class="my-card bg-secondary text-white">
            <q-card-section>
                <div class="text-h6">{{ data.protocol }}</div>
                <div class="text-subtitle2">{{ data.ip }}</div>
                <div class="text-subtitle2">[Port] {{ data.port }}</div>
                <div class="text-subtitle2">[Transaction Delay] {{ data.transactionDelay }}</div>
                <div class="text-subtitle2">[Timeout] {{ data.timeout }}</div>
            </q-card-section>

            <q-separator dark />

            <q-card-actions>
                <q-btn flat @click="deleteCard(i)">Delete</q-btn>
                <router-link to="/Modbus/MasterEthernet"><q-btn flat @click="openCard">Open</q-btn></router-link>
            </q-card-actions>
        </q-card>
    </div>
</template>