我有一个简单的 Vue.js 代码，当用户能够从 BLE 设备触发命令时。因此，我创建了一个“useSession”可组合项，它连接到 IoT 设备、网关和服务器，并在每个组合项中将数据(主要是日志)推送到存储。要回顾一般结构，here's an example .
到目前为止，我使用主页面组件中的 setup() 方法中的自定义 useSession() 可组合函数和 useStore() 创建并连接到设备code> 在可组合函数中工作得很好。
现在我的应用程序更加复杂，因此我添加了一个触发可组合方法的按钮。因此，当单击按钮时， session 会创建所有 3 个连接 (useSession().create())
结果是:
Cannot read properties of undefined (reading 'commit')
研究这个问题时我发现了这个:https://forum.vuejs.org/t/is-it-possible-to-access-usestore-from-another-usexxx-composable/114230
You should be able to call useStore from within your composable, so long as the composable itself is called from within setup. The usual rules apply that it must be called during the synchronous execution of setup, not within an asynchronous callback.
To narrow down the problem, I suggest calling useStore within your setup function, immediately before you call useAuth, to confirm that it can access the store from there.
所以我很清楚为什么这不起作用，但不确定将商店传递到我连接的每个实例是否是最佳实践。
最佳答案
可组合项主要应在创建组件实例时使用 - 直接在设置函数/ block 或相应的选项 API(data 和 beforeCreate)中使用。任何其他用途取决于它们的实现，并且需要另外确认。
预计 useStore 使用 inject 通过组件层次结构传播存储值，这仅在设置期间允许。
由于使用可组合项会导致问题，因此需要证明其合理性。将其用于全局商店的原因只有几个。可组合项允许延迟访问存储，这对于解决循环依赖关系非常有用。 provide/inject 允许使用依赖注入(inject)，项目的组件可以从根组件获取不同的默认存储，这是一种极端情况，例如对于多应用程序项目。
在任何其他情况下，Vuex/Pinia 商店都可以直接导入到使用的地方。这需要在单独的模块中定义它。
除了设置函数/ block 之外，还需要使用 useSession 可组合项，这表明它的设计或使用不正确。一般来说这种情况的处理方式如下:
<script setup>
...
const session = useSession() // calls useStore
const clickHandler = () => {
session.create()
}
</script>
关于vue.js - 单击事件后从可组合项启动 useStore()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73277487/