[Vue3] Vue3에서 vuex4 store 모듈화(2) state,mutation

이번에는 vuex4 store 모듈화를 통해 데이터를 사용 변경하는법을 알아보려고 한다.

 

1. 데이터 사용하기

 

1-1. 모듈화한 파일에서 state 저장

const Member1 = {
  namespaced: true,
  state: () => ({
    isLogin: false,
  }),
  mutations: {},
  getters: {},
  actions: {},
};

export default Member1;

 

1-2. 사용하고자하는 컴포넌트에서 useStore 와 computed 임포트

 

<template>

</template>

<script>
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";

export default {
  name: "TestView",
};
</script>

<style>

</style>

 

 

1-3. setup()에서 사용하고자 하는 state의 데이터를 computed

 

<template>

</template>

<script>
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";

export default {
  name: "TestView",
  setup() {
    const store = useStore();
    
    const isLogin = computed(
      () => store.state.Member1.isLogin
    );
    
    return {
      isLogin
    };
};
</script>

<style>

</style>

 

 

2. 데이터 변경하기

 

2-1. 변경이 필요한 컴포넌트에서 setup을 통해 commit

 

<template>

</template>

<script>
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";

export default {
  name: "TestView",
  setup() {
    const store = useStore();
    
    const isLogin = computed(
      () => store.state.Member1.isLogin
    );
    
    const Login = () => {
      store.commit("Member1/log_in")
    };
    
    return {
      isLogin
    };
};
</script>

<style>

</style>

 

 

2-2. 본인이 관리하는 store 파일에서 mutation 코드 작성

 

// src/store/modules/Member1

const Member1 = {
  namespaced: true,
  state: () => ({
    isLogin: false,
  }),
  mutations: {
    log_in(state) {
      state.isLogin = true
    },
  },
  getters: {},
  actions: {},
};

export default Member1;

 

 

다음 포스팅에서는 모듈화 상태에서 axios를 통한 비동기 작업을 알아보려고 한다.