programing

Vue 3에서 Vuex를 사용할 수 없음

sourcetip 2022. 10. 8. 16:47
반응형

Vue 3에서 Vuex를 사용할 수 없음

Vuex 사용을 매우 작은 Vue 3 응용 프로그램에 통합하려고 하는데 전혀 알 수 없는 이유로 로딩할 수 없습니다.main.js는 굉장히 단순하고use()Vuex 스토어의 스테이트먼트를 참조해 주세요.

import { createApp } from "vue"

import App from "./app.vue"
import store from "./store.js"


const app = createApp(App)
app.use(store)
app.mount("#app")

스토어 자체는 매우 심플하고 첫 번째 관련 라인은 다음과 같습니다.

import axios from "axios"
import { createStore } from "vuex"


export default {
    store: createStore({

그러나 앱이 경고 없이 성공적으로 컴파일된 후 로드하면 디버거에 다음과 같은 메시지가 표시됩니다.

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.
warn @ runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Property "$store" was accessed during render but is not defined on instance. 
  at <EventListByDay> 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of render function 
  at <EventListByDay> 
  at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: Cannot read property 'state' of undefined
    at Proxy.events (event-list-by-day.vue?04a6:61)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?a1e9:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:819)
    at Object.get [as events] (runtime-core.esm-bundler.js?5c40:5611)
    at Proxy.render (event-list-by-day.vue?04a6:2)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:696)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4035)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4018)

제가 무엇을 빠뜨리고 있나요?기본적인 거 알아요.는 Vuex 를 다음과 같이 인스톨 합니다.npm install --save vuex@nextVue3를 지원하려면 Vuex 매뉴얼에 나와 있는 바와 같이 해야 합니다.

개체로 내보내는 중입니다.{store: Store}하지만 당신이 정말로 원하는 것은,Store작성된 인스턴스createStore().

온 유저희쪽에서store.js

const store = createStore({
...
...
})

export default store

또는

export default createStore({
...
...
})

언급URL : https://stackoverflow.com/questions/66202776/unable-to-use-vuex-in-vue-3

반응형