Helper함수와 store 모듈화

# Helper함수(헬퍼)

1. state -> mapState
2. getters -> mapGetters
3. mutations -> mapMutations
4. actions -> mapActions

> vuex에 있는 헬퍼를 로딩

 

1) 따로 js파일(게터나 뮤테이션만 모아둔 js파일)로 만든 후 export한다.

  - 나의 경우 "./getters" 으로 만들었으나 하나의 js 파일로 만들어도 된다.

const getTotalNum = (state) => {
    return state.todoItems.length;
};

const getTrueNum = (state) => {
    //인자는 state
    const trueItem = state.todoItems.filter((item) => item.completed === true);
    return trueItem.length;
};

export { getTotalNum, getTrueNum };

👀 마지막에 export 하고 default 사용의 유무는 한파일에서 한번만 export 할경우 default를 붙여준다.

또한 각각마다 export 하면 너무 코드가 지저분해지므로 마지막에 export{뺄 변수1,뺄변수2} 이렇게 적은것이다.

그렇지 않다면 export변수1, export변수2 이렇게 적어야한다.

 

2)store.js에 import

import * as getters from "./getters"; //1.import
import * as mutations from "./mutations";


export const store = new Vuex.Store({
    state: {
        headText: "TODO it!", //헤더에 들어갈 값 등록하기
        //todoItems: [],
        todoItems: storage.fetch(), //위에 만들어준 값을 넣어준다
    },
    // getters: getters,
    // mutations: mutations
    getters, //2.이렇게 사용하기
    mutations,
});

 

3) 헬퍼함수 컴포넌트에 연결하기

    import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

    export default {
        computed: {
            ...mapState(),
            ...mapGetters()
        },
        methods: {
            ...mapMutations(),
            ...mapActions(),
        }
    }

- 여기서 기억할것은 mapState, mapGetters는 computed 속성에 쓰고 mapMutations, mapActions는 methods 속성에 써야한다.

- 이렇게 쓰고나서는 템플릿안에서 this없이 정의해준 방법으로 사용가능

만약에 템플릿안에서 쓸 변수와 "./getters" 에 쓴 변수가 다르다면

컴포넌트에 연결시 removeTodo: "removeOneItem"  이런식으로 쓸수 있다.

(템플릿에 쓸 변수명 : "실제 "./getters" 에 담긴 변수명")

😊또한 그전에는 컴포넌트 연결시 인자값을 넣어서 넘겼는대 헬퍼함수를 쓰면 쓰지않고도 넘어간다.

다만 템플릿상에서 인자값이 두개일경우 removeTodo({ todoItem, index }) 이런식으로 {} 안에 두개를 써주어야한다.

 

 

반응형

🙄헬퍼함수 사용하기

https://github.com/miseon920/vue_intermediate/blob/main/vue-todo-vuex/src/store/store_back2.js

 

 

# store 모듈화

1. getters와 mutations 를 분리
2. export 후 store에 import
3. 하나의 store로 관리하기 힘들경우 modules 속성 사용
 >  modules/store이름
 

1) store.js

import Vue from "vue";
import Vuex from "vuex";
import todoApp from "./modules/todoApp"

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules: {
        //모듈명칭 : 모듈 파일명
        todoApp
    },
});

 - 모듈별로 분리할 경우 namespaced: true 옵션을 넣고 호출시 모듈명을 앞에 넣으면 됨
    - 모듈 export 시 namespaced: true 옵션넣기
    - 각컴포넌트에서 헬퍼함수 사용시 "모듈명" 추가하기

 

😘하나의 스토어가 너무 비대해질경우 모듈로 나뉘어서 관리한다.

다른건 위의 방법과 같으나 모듈이 많을 경우 

 

2)컴포넌트 연결

 computed: {
    ...mapGetters("todoApp",["todoItems"]),
    //(모듈명,변수명)
},

 

👀모듈파일 보기

https://github.com/miseon920/vue_intermediate/blob/main/vue-todo-vuex/src/store/modules/todoApp.js

export시  namespaced: true,를 써야 인지 할 수 있다. 

 

쓰는이유: https://yamoo9.github.io/vuex/4-vuex-options/NamespacedModules.html#%EB%AA%A8%EB%93%88-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%A3%BC%EC%9D%98%ED%95%A0-%EC%A0%90

네임스페이스 모듈 | Vuex 러닝 가이드북

 

 

👋한가지더 

강의를 보면서 배운방식은 위의 방법인대

현업에서 일하면서 깨달은 부분과 검색하면서 깨달은 부분은

모듈 연결시 모듈명을 계속 써가면서 컴포넌트에 연결하는 것은 비효율적이라서

변수 하나에 네임스페이스 헬퍼를 생성하고 보통 사용한다.

 

참고할만한곳 : https://webruden.tistory.com/340

Vuex 제대로 사용하는 방법 (Vuex의 기초부터 심화까지)

하지만 최근에는 vuex보다는 pinia로 많이 한다.

그이유는 이전 피니아 글에서 쓰기도 했지만 사실 더 편한다.

둘다 써보니 왜 피니아를 쓰는지 알거같은 너낌

 

피니아 글 참고 👀