如何在 Vue 3 组件中使用 Vuex 4 状态数据作为另一个调度的有效负载？

Posted 2023-02-22

【中文标题】如何在 Vue 3 组件中使用 Vuex 4 状态数据作为另一个调度的有效负载？

【英文标题】：How to use Vuex 4 state data inside Vue 3 component as payload for another dispatch?

【发布时间】：2021-05-23 20:32:15

【问题描述】：

我正在使用 Vue 3 组合 API 和 Vuex 4 中的 useStore 钩子

这就是我从 setup() 中的 vuex 存储中获取数据（id）的方式

    setup () 
                const store = useStore()    
                const allIds = computed(() => store.state.ids)               
    
            function printIds () 
                console.log(allIds.value)
               
             //...
         

问题是我无法使用 allIds 数组，因为它包含在代理中。这就是我在 console.log(allIds.value) 上得到的 -

当我在模板中使用此数组时，它工作正常，但我想将此数据用作有效负载，以使用数组中的 1 个 id 在组件内进行另一个动作调度。我怎样才能做到这一点？我发现的所有示例都是在模板中使用商店数据。

谢谢。

【参考方案1】：

代理不会阻止您将数据用作有效负载，您只需使用.value 属性并从那里正确访问数据。

allIds 变量是一个对象，其pads 属性中有一个数组。所以要传递数组中的第一项，例如：

const store = useStore()    
const allIds = computed(() => store.state.ids)               
    
store.dispatch('actionName', allIds.value.pads[0]);

商店

actions: 
  actionName( commit , payload) 
    console.log(payload);
  

【讨论】：

这适用于 actionName。有没有一种方法可以在组件本身中使用与我想在那里使用 id 相同的方法？在组件内的任何位置（如 onMounted）记录 allIds.value.pads[0] 会引发错误。

它应该可以在setup 的任何地方工作，包括onMounted。也许检查你的onMounted 调用的语法并确保它在计算之后。如果您无法使其正常工作，请向我显示代码和错误。

代码：snipboard.io/4F0SBP.jpg 我第一次在同一个组件中调度一个动作，将 padIds 添加到存储然后读取它。你能看看sn-p并提出建议吗？感谢您的帮助。

我猜测添加 id 的操作是异步的。因此，当组件安装时，id 还没有准备好。 onMounted 中的 id 需要做什么？

是的，该操作是异步的。使用这样的手表有效：snipboard.io/lOSFhc.jpg 那么有没有更好的方法来实现这一点？ 1. 将异步数据添加到存储 2. 从存储中读取该数据 3. 调用另一个调度