inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js + TypeScript 완벽 가이드

현재 vue2 typescript 적용 된 프로젝트에서 composition api 적용 시 에러 문의

735

fitcollabo(mo@)

작성한 질문수 4

1

현재 vue2 vue-news 프로젝트에서 "@vue/composition-api": "^1.4.9",를 활용하여 composition api 적용 중

dispatch(action)을 호출 하는경우

[vuex] unknown action type: FETCH_NEWS가 발생하고 있습니다.

import { defineComponent,reactive, toRefs } from '@vue/composition-api'
import { MutationTypes } from './store/mutations'
import { ActionTypes } from './store/actions'

export default defineComponent({
name: 'App',
async setup(props, context) {
const store = context.root.$store
console.log(store?.state)
store?.commit(MutationTypes.SET_NEWS, [1, 2, 3])
console.log(ActionTypes.FETCH_NEWS)
await store?.dispatch('FETCH_NEWS')
    await store?.dispatch(ActionTypes.FETCH_NEWS)

// 데이터 함수 선언(data)
const state = reactive({
loading: false,
})

return {
...toRefs(state),
}
},
})

 

소스 확인 결과 api 호출 시 store 객체를 접근하는 경우 위와 같은 에러가 발생하며,

store객체를 주석처리 하거나 ActionTypes를 분리하여 import를 하면 정상적으로 api 호출이 되었습니다. 

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
// import { setDefaultOptions } from '@/api/instance/intercepter'
import store from '@/store'

const APP_BASE_URI: string =
""
const options = {}

function create(url: string, options = {}): AxiosInstance {
const instance = axios.create(Object.assign({ baseURL: url }, options))
console.log(store)
instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
return config
},
(error) => {
return Promise.reject(error.response)
},
)
return instance
}

 

import { fetchNews } from '@/api'
import { ActionContext } from 'vuex'
import { Mutations, MutationTypes } from './mutations'
import { RootState } from './state'

enum ActionTypes {
FETCH_NEWS = 'FETCH_NEWS',
}

type MyActionContext = {
commit<K extends keyof Mutations>(
key: K,
payload: Parameters<Mutations[K]>[1],
): ReturnType<Mutations[K]>
} & Omit<ActionContext<RootState, RootState>, 'commit'>

const actions = {
async [ActionTypes.FETCH_NEWS](context: MyActionContext, payload?: any) {
const { data } = await fetchNews()
context.commit(MutationTypes.SET_NEWS, data)
return data
},
}

type Actions = typeof actions

export { actions, Actions, ActionTypes }

 

혼자 해결 방법을 찾아보다가 방법이 없어 문의 드립니다..

해당 에러가 발생하는 이유가 뭔지 궁금합니다..

 

 

typescript vuejs

답변 1

1

캡틴판교

안녕하세요, context.root로 접근하는 대신 아래와 같이 해보시겠어요? :)

import store from '@/store/index';

 

setup() {

  store.dispatch('FETCH_NEWS');

}

composition API에서의 ref

1

248

2

Vue3 + Typescript + Vite + Pinia 참조

3

1866

2

mutation 함수 이름을 enum으로 관리하는 이유

1

353

2

this.todoItem 타입이 any 라고 나옵니다

1

406

1

프로젝트 실행 시 오류가 발생합니다.

1

592

2

두번째 프로젝트 권한 요청 드립니다.

1

376

2

강의자료 ? 노트?

1

362

2

vuex 사용시 mapper 보다는 그냥 쓰는 것이 낫다고 하셨는데요..

1

290

2

권한 허가 부탁드립니다!

1

414

2

Chart.js(3.9.1버전) 안되시는분들 이렇게 해보세요

1

875

2

두번째 프로젝트 권한 요청 드립니다.

1

381

2

두번째 프로젝트 권한 요청드립니다.

1

457

3

두번째 프로젝트 권한 요청 합니다.

1

342

1

두번째 프로젝트 npm i && npm run serve에러 납니다..

1

500

2

두번째 프로젝트 권한 요청 드립니다

1

467

1

두번째 프로젝트 권한 요청 드립니다

1

423

2

두번쨰 프로젝트 권한요청

1

417

3

두번째 프로젝트 권한 요청

1

368

2

두번째 프로젝트 권한부탁드립니다.

1

338

1

권한요청 드립니다.

1

334

1

두번째 프로젝트 권한 요청 드립니다.

1

346

1

project.d.ts 파일관련 문의사항

2

409

2

권한요청입니다.

1

376

2

두번째 프로젝트 권한요청

1

205

2