현재 vue2 typescript 적용 된 프로젝트에서 composition api 적용 시 에러 문의
735
작성한 질문수 4
현재 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 }
혼자 해결 방법을 찾아보다가 방법이 없어 문의 드립니다..
해당 에러가 발생하는 이유가 뭔지 궁금합니다..
답변 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
1863
2
mutation 함수 이름을 enum으로 관리하는 이유
1
352
2
this.todoItem 타입이 any 라고 나옵니다
1
402
1
프로젝트 실행 시 오류가 발생합니다.
1
590
2
두번째 프로젝트 권한 요청 드립니다.
1
374
2
강의자료 ? 노트?
1
361
2
vuex 사용시 mapper 보다는 그냥 쓰는 것이 낫다고 하셨는데요..
1
289
2
권한 허가 부탁드립니다!
1
414
2
Chart.js(3.9.1버전) 안되시는분들 이렇게 해보세요
1
874
2
두번째 프로젝트 권한 요청 드립니다.
1
381
2
두번째 프로젝트 권한 요청드립니다.
1
457
3
두번째 프로젝트 권한 요청 합니다.
1
342
1
두번째 프로젝트 npm i && npm run serve에러 납니다..
1
499
2
두번째 프로젝트 권한 요청 드립니다
1
467
1
두번째 프로젝트 권한 요청 드립니다
1
423
2
두번쨰 프로젝트 권한요청
1
417
3
두번째 프로젝트 권한 요청
1
368
2
두번째 프로젝트 권한부탁드립니다.
1
337
1
권한요청 드립니다.
1
334
1
두번째 프로젝트 권한 요청 드립니다.
1
346
1
project.d.ts 파일관련 문의사항
2
408
2
권한요청입니다.
1
374
2
두번째 프로젝트 권한요청
1
205
2





