[Nuxt] Composition-API 적용에 따른 컨벤션에 관한 고민들

Nekoromancer·2021년 5월 11일
0
import { 
  defineComponent,
  reactive,
  toRefs,
} from '@nuxtjs/composition-api';

export default defineComponent({
  name: 'MyComponent',
  props: {
    someProps: {
      type: Boolean,
      default: false,
    },
  },
  setup (props, { emit }) {
    const state = reactive({
      	// 각종 반응성 있는 데이터들
    });
    
    const watches = {
    	// watch, setTimeout 등![](https://velog.velcdn.com/images%2Fnekonitrate%2Fpost%2Fb472df3c-cb78-4ceb-a3b8-1dd1693e9ab8%2Fimage.png)
    };
    
    const emits = {
      myEvent: event => emit('event-name', event),
    };
    
    const getters = {
      userName: id => state.users.find(user => user.id === id).name,
    };
      
    const mutations = {
      userStatus: (id, status) => {
        state.users.find(user => user.id === id).status = status;
      },
    };
      
    const actions = {
      onClickDeleteUser: id => {
        const idx = state.users.findIndex(user => user.id === id);
        state.users.splice(idx, 1);
      },
    };
      
    return {
      ...toRefs(state),
      props,
      emits,
      getters,
      mutations,
      actions,
    };
  },
})
profile
고양이 앓이 중인 프론트엔드 개발자

0개의 댓글