Vue.js/Nuxt.js에서 Vuex(Store) 사용시 Cause 발생 해결 방법
Vuex 라이브러리를 이용 해서 넉스트 프로젝트 진행중, jest를 이용한 자동화 유닛테스트 부분에서 에러는 아니지만 아래와 같은 경고 메시지가 Lint에서 발생 하였다.
Caution: `Vuex` also has a named export `Store`.
Check if you meant to write `import {Store} from 'vuex'` instead.eslintimport/no-named-as-default-member
문제 되는 부분
전체 소스 코드
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Logo from '~/components/Logo'
import a from '~/store/notices/index.js'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('[notices] mutations', () => {
it('[set_notice]', () => {
a.mutations.set_notice(a.state, { id: 1 })
expect(a.state.notice.id).toBe(1)
a.mutations.set_notice(a.state, { id: 2 })
expect(a.state.notice.id).toBe(2)
})
})
describe('[notices] actions', () => {
let store
beforeEach(() => {
store = new Vuex.Store({
getters: a.getters,
state: a.state,
actions: a.actions,
mutations: a.mutations,
})
})
it('[public_index_notices]', async () => {
shallowMount(Logo, { store, localVue })
const commit = jest.fn()
store.mutations.set_notices(store.state, [])
expect(store.state.notices.length).toBe(0)
await store.actions.public_index_notices({ commit })
expect(store.state.notices.length).toBe(1)
})
})
문제 되는 부분은 new Vuex.Store
라인으로 원인은 Vuex의 버전이 올라가면서 Store 클래스가 따로 분리 되어 발생한 것으로 보인다.
해결 방법은 new Store
형태로 바꿔주고 import 부분도 아래처럼
import Vuex, { Store } from 'vuex'
변경 해주면 경고 메시지가 해소 되는걸 확인 할 수 있다.
해결후 전체 소스 코드
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex, { Store } from 'vuex'
import Logo from '~/components/Logo'
import a from '~/store/notices/index.js'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('[notices] mutations', () => {
it('[set_notice]', () => {
a.mutations.set_notice(a.state, { id: 1 })
expect(a.state.notice.id).toBe(1)
a.mutations.set_notice(a.state, { id: 2 })
expect(a.state.notice.id).toBe(2)
})
})
describe('[notices] actions', () => {
let store
beforeEach(() => {
store = new Store({
getters: a.getters,
state: a.state,
actions: a.actions,
mutations: a.mutations,
})
})
it('[public_index_notices]', async () => {
shallowMount(Logo, { store, localVue })
const commit = jest.fn()
store.mutations.set_notices(store.state, [])
expect(store.state.notices.length).toBe(0)
await store.actions.public_index_notices({ commit })
expect(store.state.notices.length).toBe(1)
})
})
컴파일 에러는 아니지만 미래의 문제소지가 있는 부분이 워닝메시지로 올라오기 때문에 가능하다면 전부 해결 해주는게 좋겠다.
Author And Source
이 문제에 관하여(Vue.js/Nuxt.js에서 Vuex(Store) 사용시 Cause 발생 해결 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nuxt/Nuxt-VuexStore-Cause저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)