无法在 Vue 3 中使用 Vuex

Question

我正在尝试将 Vuex 的使用集成到一个非常小的 Vue 3 应用程序中，但由于我完全不清楚的原因，我无法加载东西。我的 main.js 非常简单，并且在 Vuex 存储上做了一个 use() 声明，正如文档所指示的那样：

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@next，因为 Vuex 文档指示我应该这样做以支持 Vue 3。

Answer 1

您将其作为对象导出 {store: Store} 但您真正想要做的是导出 createStore() 创建的 Store 实例。

在你的store.js

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

export default store

或

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

无法在 Vue 3 中使用 Vuex

Unable to use Vuex in Vue 3

vue.js

vuex

vuejs3