Как использовать данные состояния Vuex 4 внутри компонента Vue 3 в качестве полезной нагрузки для другой отправки?

Я использую Vue 3 Composition API и хук useStore из Vuex 4

Вот как я получаю данные (идентификаторы) из магазина vuex внутри setup ()

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

Проблема в том, что я не могу использовать массив allIds, поскольку он заключен в прокси. Это то, что я получаю в console.log (allIds.value) -

введите описание изображения здесь

Когда я использую этот массив в шаблонах, он работает нормально, но я хочу использовать эти данные в качестве полезной нагрузки для другой отправки действий внутри компонента с использованием одного идентификатора из массива. Как я могу это сделать? Все примеры, которые я нашел, предназначены для использования данных магазина в шаблонах.

Спасибо.


vue.js vuex vuejs3 vuex4 vue-composition-api
person mustafa1993    schedule 21.02.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Прокси-сервер не помешает вам использовать данные в качестве полезной нагрузки, вам просто нужно использовать свойство .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);
  }
}
person Dan    schedule 21.02.2021
comment
Это работает внутри actionName. Есть ли способ использовать то же самое в самом компоненте, поскольку я хочу использовать там идентификатор? регистрация allIds.value.pads [0] в любом месте внутри компонента (например, onMounted) вызывает ошибку. - person mustafa1993; 21.02.2021
comment
Он должен работать везде в setup, включая onMounted. Возможно, проверьте синтаксис вашего onMounted вызова и убедитесь, что он идет после вычисленного. Покажите мне код и ошибку, если не можете заставить ее работать. - person Dan; 21.02.2021
comment
Код: snipboard.io/4F0SBP.jpg Я первый отправляю действие в том же компоненте, которое добавляет padIds в сохранить, а затем прочитать позже. Не могли бы вы взглянуть на фрагмент и предложить? Спасибо за вашу помощь. - person mustafa1993; 21.02.2021
comment
Я предполагаю, что действие, которое добавляет идентификаторы, является асинхронным. Таким образом, идентификаторы еще не готовы, когда компонент смонтирован. Что вам нужно делать с идентификаторами в onMounted? - person Dan; 21.02.2021
comment
Да, действие асинхронное. Вот такие часы сработали: snipboard.io/lOSFhc.jpg Так есть ли лучший способ добиться этого? ? 1. добавить асинхронные данные для хранения 2. Прочитать эти данные из магазина 3. Вызвать другую диспетчерскую - person mustafa1993; 21.02.2021
comment
Другой способ - вернуть обещание из действия и дождаться его: store.dispatch('getPads').then(() => { /* Do stuff here */ }); Чтобы это сработало, не забудьте вернуть обещание http в действии, например return axios.get(...) - person Dan; 21.02.2021