Как сохранять состояние одного vue компонента (keep-alive) с различными входными данными?

Question

[Евгений Хрипунов]

Имеется компонент, который отображает список пользователей с которыми велась переписка. А также второй компонент чата для личной переписки.
При выборе пользователя вызывается метод, который передает в vue-router входные параметры (props) и открывает компонент с чатом.

openPrivateUserChat(user) {
                this.$router.push({
                    name: 'PrivateUserChat',
                    params: {user_id: user.id}
                });
            }

В компоненте с чатом всегда в created() отправляется запрос на получение сообщений:

axios.post('/api/getMessagesForUser', {
                    user_id: this.user_id,                    
                })

Далее сообщения сохраняются в переменную в чат-компоненте.
На данный момент чат-компонент один и каждый раз создается новый из-за различных входных данных.
Приложение SPA, поэтому необходимо только один раз отправить запрос на сервер при первом открытии чата с каким-либо пользователем , а далее просто сохранять состояние компонента через keep-alive.
Можно ли сохранять состояние одного компонента с разными входными данными или же делать различные копии компонента?

Answer 1

[Владислав Нагорный]

Vuex

Answer 2

[0xD34F]

Можно ли сохранять состояние одного компонента с разными входными данными

Честно говоря, совсем не понимаю, в чём тут проблема. Если входные данные - это id пользователя, с которым ведётся переписка, то почему бы не допустить хранение переписки сразу с несколькими пользователями: объект, ключи которого - id пользователей, значения - соответствующие сообщения. Делать watch на активного пользователя - при изменении проверять, если такого в объекте ещё нет, запрашивать его сообщения (код из created вынести в отдельный метод, чтобы можно было использовать и в created и в watcher'е).