使用 vuex 4 的 vue 3 中的状态管理失败 - 在 codesandbox 中共享代码

Question

亲爱的现代轻量级网络的朋友们，我希望你能帮助一个关于 vue3 和 Vuex 4 的新手。

我在多个子组件之间共享时间表详细信息（objects/dictionary 的数组），然后可以显示（例如，前 5 个工作）或编辑（例如，添加新的工作详细信息），以便这些更改得到反映在所有其他组件中。为此，我尝试使用 Vuex 4。

我无法访问组件中的状态。出于调试原因，我什至在创建状态期间添加了一个虚拟条目。

https://codesandbox.io/s/dazzling-brahmagupta-5sn1t?file=/src/main.js

Answer 1

您的演示使用了 Vuex 3（也许那只是演示中的一个错误）。一定要安装Vuex 4，它提供了createStore()方法：

npm i -S vuex@4

此外，createStore() 的结果应传递给 app.use()，这是来自 createApp()（不是 App.vue 组件）的应用程序的实例方法：

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore(/*...*/)

// App.use(store) ❌ don't do this

createApp(App)
  .use(store) ✅
  .mount('#app')

demo

使用 vuex 4 的 vue 3 中的状态管理失败 - 在 codesandbox 中共享代码

State management in vue3 with vuex4 fails - Code shared in codesandbox

vuex

vuejs3