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

Question

我正在使用 Vue 3 Composition API 和 Vuex 4 中的 useStore hook

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

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

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

上得到的

当我在模板中使用这个数组时，它工作正常，但我想使用这个数据作为组件内部另一个动作分派的有效负载，使用数组中的一个 id。我怎样才能做到这一点？我找到的所有示例都是在模板中使用商店数据。

谢谢。

Answer 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);
  }
}

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

How to use Vuex 4 state data inside Vue 3 component as payload for another dispatch?

vue.js

vuex

vuejs3

vue-composition-api

vuex4