소개

프로젝트 시작 시 아키텍처는 중요하지 않을 수 있지만 구성 요소를 손상시키지 않고 추가하거나 제거할 수 있는 용이성은 코드베이스가 얼마나 잘 구조화되었는지를 보여줍니다. Vue JS 코드를 더 좋게 만드는 방법을 살펴보겠습니다.

상태, 맵 게터 및 작업을 사용합니다.

Vuex에서 제공하는 상태 및 맵(예: mapGetters, mapActions, mapState 등)을 사용하면 코드를 매우 재사용할 수 있습니다. SFC의 data() 객체에 대한 하드 코딩 상태는 "더 빠름"이 향후 이러한 값 중 일부가 필요한 경우 어려움을 일으키기 때문입니다.

<!-- first.vue -->
<template>
  <h3>{{firstname}}{{lastname}}</h3>
</template>

<script>
  export default {
    data() {
      return {
        firstname: "",
        lastname: ""
      };
    },
    methods: {
      async getFullName() {
        const { firstname, lastname } = await fetchNameFromApi();
        this.firstname = firstname;
        this.lastname = lastname;
      }
    },
    created() {
      this.getFullName();
    }
  };
</script>

프로젝트 관리자: 두 페이지에 더 표시하려면 이름과 성이 필요합니다.

해당 요청을 통해 다른 파일에서 계속 복사, 붙여넣기, 가져오기 및 내보내기를 수행하게 됩니다.

그래도 낫다,

const state = {
  firstname: "",
  lastname: ""
};

const actions = {
  async getFullName({ commit, dispatch }, data) {
    getFullNameFromApi().then(res => {
      commit(mutate.FULL_NAME, res.body);
    });
  }
};

const mutations = {
  //Set default mutation types in another file
  [mutate.UPDATE_FULL_NAME](state, data) {
    state.firstname = data.firstName;
    state.lastname = data.lastName;
  }
};

const getters = {
  firstName: state => state.firstname,
  lastName: state => state.lastname
};

const FullName = {
  state,
  actions,
  mutations,
  getters
};

export default FullName;

그런 다음 first.vue 구성 요소에서

<template>
  <h3>{{firstName}}{{lastName}}</h3>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';

  export default {
   methods:{
   ...mapActions(['getFullName']);
   },
   created(){
   this.getFullName();
   },
   computed:{
   ...mapGetters(['firstName', 'lastName']);
   }
  }
</script>

이제 사용자의 성과 이름이 필요한 새 구성 요소를 포함해야 하는 경우 getter와 작업을 쉽게 매핑할 수 있습니다.

이것은 또한 다음과 같은 것을 피하는 데 도움이 됩니다.

const firstname = this.$store.state.fullName.firstName;
const lastname = this.$store.state.fullName.lastName;

우리는 단순히 getter를 사용할 수 있습니다

computed:{
 ...mapGetters(['firstName','lastName'])
}

마지막으로 이것은 SFC에서 비즈니스 로직을 추상화하는 데 도움이 되며 테스트를 더 쉽게 만듭니다. Store가 모든 논리를 처리하도록 허용하고 SFC는 경고 버튼/스낵 바 등의 상태와 같이 밀접하게 연결된 항목을 처리해야 합니다.

믹스인을 통한 필터.

믹스인은 암시적 종속성, 네임스페이스 충돌 등으로 이어집니다. 이에 대해 자세히 알아볼 수 있습니다here. 일부 믹스인은 필터로 변환할 수 있습니다.

//dateMixin.js
export default {
  methods: {
    formatDate(date) {
      return date.split("T")[0];
    }
  }
};

SFC에는 다음이 있습니다.

<template>
  <h3>{{formatDate(date)}}</h3>
</template>

<script>
  import dateMixin from "./dateMixin";

  export default {
    mixins: [dateMixin],
    data() {
      return {
        date: "2019-08-07T00:00:00"
      };
    }
  };
</script>

필터로,

//main.js
import Vue from "vue";

Vue.filter("formatDate", value => value.split("T")[0]);

저희 에스에프씨에서는

<template>
  <h3>{{date | formatDate}}</h3>
</template>

<script>
  export default {
    data() {
      return {
        date: "2019-08-07T00:00:00"
      };
    }
  };
</script>

모듈을 사용하여 애플리케이션에서 서로 다른 서비스를 분리합니다.

상태에 필요한 모든 것을 하나의 개체에 포함하는 대신 모듈로 분리할 수 있습니다.

대신에

const state = {
  token: "",
  amount: "",
  firstname: "",
  lastname: "",
  email: "",
  isLoggedIn: ""
};

인증, 프로필 관리, 지갑으로 서비스를 나눌 수 있습니다.

폴더 구조는 다음과 같습니다.

modules
 authentication
    index.js
 profile-management
    index.js
 wallet
    index.js

index.js 파일에서 해당 서비스에 중요한 상태를 가질 수 있습니다.

//modules/authentication/index.js

const state = {
 token: '',
 isLoggedIn:''
}

...

그런 다음 스토어를 초기화할 때 모든 모듈을 추가할 수 있습니다.

export const store = new Vuex.store({
 state: {
    //something general
    isAppBusy: false
 },
 modules:{
    authentication,
    profile-management,
    wallet
 }
});

결론

Vue 코드의 구조를 개선하는 방법에 대한 제 생각입니다. 덧셈이나 뺄셈이 더 있으면 댓글로 보고싶네요 😄.