Как обработать состояние, когда несколько компонентов используют одни и те же действия в Vuex для извлечения данных? - PullRequest
Новая
       11

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

0 голосов
/ 23 января 2019

Я уже некоторое время использую Vuex для контроля всего своего приложения. Но теперь я столкнулся с проблемой, с которой никогда не сталкивался.

Рабочий процесс выглядит так:

  1. Корневой компонент будет извлекать данные из моей базы данных, которая представляет собой массив с несколькими объектами в нем.
  2. Я создал дочерний компонент и использую v-for, чтобы показать этот массив пользователю (это означает, что каждый дочерний компонент представляет объект в массиве позже)
  3. Проблема возникает, когда я пытаюсь извлечь асинхронные данные для каждого дочернего компонента, для извлечения данных мне также нужен параметр, который поступает из упомянутого массива.
  4. Я использую действия Vuex в созданном хуке моих дочерних компонентов. Действия fetch_sim_Type будут принимать полезную нагрузку (которая является параметром родительского компонента, также из исходного массива). И измените состояние simType в state: {} Vuex.
  5. Используя вычисленные свойства, я могу получить simType в моем дочернем компоненте и показать его пользователю. Пока все работает.

КОДА:

Исходный массив (simSumArray в Parent-компоненте) выглядит следующим образом: 

[
    { typeid: 1, name: XXX },
    { typeid: 2, name: ZZZ },
    { typeid: 3, name: GGG },
    { typeid: 4, name: JJJ },
]

РОДИТЕЛИ-КОМПОНЕНТ: 

<template
    v-for="(singleSim, idx) in simSumArray"
>
    <sim-single :singleSim="singleSim"></sim-single>
</template>

ДЕТИ-КОМПОНЕНТА: 

props: ['singleSim'],
created () {
    store.dispatch('fetch_sim_Type', this.singleSim.typeid);
},
computed: {
    simType () {
        console.log("store.getters.get_simType: ", store.getters.get_simType)
        return store.getters.get_simType;
    }
},

В VUEX: 

state: {
    simType: 'unknown'
},
actions: {
    fetch_sim_Type (context, typeid) {
        //.. fetch the data based on typeid from DB
        context.state.simType = fetchedData;
    }
}

Но это работает только в массиве, только когда объект существует. Когда создается более одного дочернего компонента. Состояние simType в Vuex store.js будет многократно заменяться, и в каждом дочернем компоненте simType () всегда одинакова.

Проблему сложно описать. Основная проблема заключается в том, что состояние в Vuex предназначено для совместного использования во всем приложении, поэтому, если у меня есть несколько дочерних компонентов, они все извлекают данные для себя, тогда общее состояние будет заменяться все время и Я не могу получить индивидуальное состояние для каждого дочернего компонента.

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

Я уверен, что это не должно быть сложным вопросом. Но я не могу найти никакого относительного ответа онлайн.

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Я добился успеха, сохранив общие данные в хранилище Vuex и просмотрев их по моим компонентам.

Хотя это и не лучшая практика, я иногда даже не пытаюсь использовать действия или коммиты для изменения состояния, а просто изменяю состояние напрямую. В этом сценарии Vuex просто действует как общий data объект для всех моих компонентов.

Vue Store 

state: {
   myvalue: []
}

Компоненты 

watch: {
  '$store.state.myvalue'(value) {
  }
}
0 голосов
/ 23 января 2019

При чтении вашего кода поведение, которое вы описываете, является нормальным.Я вижу два решения вашей проблемы (решение 2, вероятно, ближе к тому, что вы ищете):

Решение 1 - сохраните simType в вашем компоненте

если вам нужно получить доступ к simType откуда-то еще, чем внутри вашего компонента, и сохранить его в вашем состоянии, перейдите к решению 2

Когда ваш компонент будет создан, сохраните simtype в данных компонента.Это будет выглядеть так:

В вашем компоненте: 

data () {
    return {
       simType: undefined //declare simType as one of your component's data property
    }
},
created () {
    store.dispatch('fetch_sim_Type', this.singleSim.typeid).then(simType => {
        this.simType = simType //store the fetched simType
    })
}

В ваших действиях vuex: 

actions: {
    fetch_sim_Type (context, typeid) {
        //.. fetch the data based on typeid from DB
        return fetchedData //pretty much the same except return the result
    }
}

Решение 2 - сохраните simTypes в вашем состояниииндексируются по их идентификаторам

Сохраните выбранный вами simType по идентификатору, например: 

state: {
    simTypes: {} //simTypes is now plural, and is an empty object at first. It will later contain several simTypes, indexed by their respective Ids
},
actions: {
    fetch_sim_Type (context, typeid) {
        //.. fetch the data based on typeid from DB
        context.state.simType[typeid] = fetchedData; // a fetched simtyped will be store in simTypes and can be accessed with the typeid as a key
    }
}

, чтобы получить simType, вы можете написать метод получения vuex, например: 

getters: {
  getSimTypeById: (state) => (typeId) => {
    return state.simTypes[typeId]
  }
}

Итак, в вашем примере вычисляемый метод будет выглядеть так: 

computed: {
    simType () {
        console.log("store.getters.getSimTypeById(this.singleSim.typeid): ", store.getters.getSimTypeById(this.singleSim.typeid)
        return store.getters.getSimTypeById(this.singleSim.typeid);
    }
},

Это решение, в качестве бонуса, позволяет вам получить simType только один раз, если несколько ваших предметов имеют одинаковый simType.

...