Vue.use()가 "정의되지 않은 속성 '사용'을 읽을 수 없음"을 던지는 경우

Vue.use()가 "정의되지 않은 속성 '사용'을 읽을 수 없음"을 던지는 경우

시도 1

main.js.

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

store.js.

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

시도 1 오류

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (store.js?07a4:4)
    at Module../src/store/store.js (app.js:1342)

시도 2

main.js.

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

store.js.

import Vuex from 'vuex'
import Vue from 'vue'

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

시도 2 오류

vuex.esm.js?94ea:135 Uncaught Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
    at assert (vuex.esm.js?94ea:135)
    at new Store (vuex.esm.js?94ea:380)
    at eval (store.js?07a4:6)

나는 Vue CLI를 사용하여 Vue 애플리케이션을 생성했다.나는 Vuex를 구현하려고 노력하고 있다.나는 수많은 튜토리얼을 따라왔다. (보통 두 가지 다른 방법을 설정한다.)디버거를 사용할 때 "Vue.use(Vuex)"라고 읽기 전에 멈출 수 있었다.이 시점에서 Vue 로깅은 정의되지 않은 상태로 반환된다.나는 내 수입품이 맞다고 믿지만 중요한 것을 놓치고 있는지 모르겠다.어떤 도움이라도 대단히 고맙게 생각한다.

편집: 시도 1과 시도 2의 유일한 차이점은 시도 2에서 "Vue.use(Vuex)"를 제거했다는 것이다.

다음과 같은 구문을 가진 Vuex 4와 호환되는 Vue 3 구문을 Vue 3과 함께 사용하고 있는 경우:

store.js.

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state: {
    patients: []
  }
})
export default store;

그런 다음 내보낸 저장소를 main.js:

import { createApp } from 'vue'
import store from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

Vuex 4 문서

Vue.js 문서 3개

VueX(3.6)를 제거하여 이 작업을 수행할 수 있었다.

npm uninstall vuex

VueX(4.0 알파) 설치

npm i vuex@4.0.0-alpha.1

이 오류의 원인은 내가 다른 버전에서 2개의 다른 구문 방법을 사용하고 있었기 때문이다.

모두의 도움에 감사한다!

main.js.

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')

store.js.

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      patients: []
    }
  }
})

export default store;

참조URL: https://stackoverflow.com/questions/65327556/vue-use-is-throwing-cannot-read-property-use-of-undefined