[vue: worklist 제작] 2. 변환된 json으로 1Depth 단위로 테이블 그리기(1)

store.js

import Vuex from 'vuex';

import IA from './assets/ia-json.json';

const store = new Vuex.Store({
    state: {
        iaKeys : [],
        iaData : []
    },
    mutations: {
        SET_IA(state,lists){
            state.iaData = lists;
        },
        SET_KEYS(state,keys){
            state.iaKeys = keys;
        },
        MODI_IA(state,{newIA,id}){
            const list = state.iaData.filter ((ia)=>{
                if(ia[id] == newIA[id]) {
                    ia = newIA
                }
            })
            state.iaData = list;
        }
    },
    actions: {
        FETCH_IA({commit}){
            commit('SET_KEYS',IA.keys);
            commit('SET_IA',IA.lists);
        },
        modiIA ({commit},newIA) {
            const id = newIA['SCREEN ID']
            commit('MODI_IA',{newIA,id});
        }
    }
})

export default store;

 

변환된 json을 불러온다

import IA from './assets/ia-json.json';

 

 

 

header에 해당하는 key와

list를 각각 넣어준다

state: {

   iaKeys : [],

   iaData : []

},

mutations: {

   SET_IA(state,lists){

      state.iaData = lists;

   },

   SET_KEYS(state,keys){

      state.iaKeys = keys;

   },

},

actions: {

   FETCH_IA({commit}){

      commit('SET_KEYS',IA.keys);

      commit('SET_IA',IA.lists);

   },

}

 

 

 

ia 수정될 경우

newIA 수정될 배열을 받아 SCREEN ID를 뽑아서 newIA와 id를 같이 보냄

MODI_IA에서 state의 iaData의 screen id를 비교하여 동일하면 해당 배열(newIA)를 교체하여 다시 state.iaData에 치환한다

 

추후에 SCREEN ID부분을 해당 IA타이틀에 맞게 바꿔야하는 번거로움이 있어 개선방법을 생각해 봐야겠다.

mutations: {

   MODI_IA(state,{newIA,id}){

      const list = state.iaData.filter ((ia)=>{

         if(ia[id] == newIA[id]) {

            ia = newIA

         }

      })

      state.iaData = list;

   }

},

actions: {

   modiIA ({commit},newIA) {

      const id = newIA['SCREEN ID']

      commit('MODI_IA',{newIA,id});

   }

}

 

 

App.vue

<template></template>

<script>
export default {
  name: 'App',
  beforeCreate(){
    this.$store.dispatch('FETCH_IA');
  },
}
</script>

인스턴스가 초기화 된 직후(beforeCreate)에 FETCH_IA를 실행하여

store의 json data를 state에 넣어준다

this.$store.dispatch('FETCH_IA');