vue 프로젝트 시작! --store폴더

데이터의 흐름은 Actions -> Mutations -> State 순서임을 알 수 있습니다.

actions --(commit)-->  mutations --(mutate변화)--> state --(render)--> vue components

--(dispatch)--> actions 

 

actions: Backend API를 받는다. 

vuex 구조도 : actions, mutations, state를 의미한다. 

('index'.js)생성  --파일이름 자유

import Vue from 'vue';

import Vuex from 'vuex';

import { 

getNotice, getNoticeContents 

} from '../api/api.js';     //action역할



Vue.use(Vuex);      //필수

 

export const store = new Vuex.Store({          //const 대신 default 사용 가능

    state: {

        notice: [],

        noticeInfo: {},

    },

    mutations: {

        SET_NOTICE(state, notice) {

            state.notice = notice;

        },

        SET_NOTICE_INFO(state, noticeInfo) {

            state.noticeInfo = noticeInfo;

        }

    },

    actions: {

        GET_NOTICE() {

            getNotice()

                .then(response => {

                    console.log("response");

                    console.log(response.data);

                })

                .catch();

        },

        GET_NOTICE_INFO(idx) {

            getNoticeContents(idx)

                .then(response => {

                    console.log(response.data);

                });

        }

    }

})