Вопросы с тегами [vuex]

0

голосов
0

ответ
5

Просмотры

VueJS / VueX: Часы никогда не вызывается, когда государственная собственность является массивом

У меня есть простой поток, которые состоят в: Вызов действия VueX хранить несколько автомобилей на стороне серверной Позвони мутацию для хранения новых автомобилей только что создали Объявите часы, которые должны вызываться каждый раз, когда массив автомобилей я изменилась Проблема в том, что мой наблюдатель является никогда не называли в моем компоненте. Модуль VueX: / * * Состояние: свойства для хранения * / Const State = {siteCars: []}; / * * Геттеры: Геттеры свойств, определенных в состоянии * / Const геттеры = {siteCars (состояние) {вернуть state.siteCars; }}; / * * Мутации (Сеттеры): Сеттеры свойств, определенных в состоянии * / Const мутации = {PUSH_CARS (состояние, данные) {state.siteCars = _.merge (state.siteCars, data.cars); }}; / * * * Действия / константные действия = {/ * * Действие используется для создания нескольких автомобилей * / massImportCars ({совершает, rootState}, Полезная нагрузка) {axiosBackend.post ( "/ автомобили / massimport", полезная нагрузка, {заголовки: {авторизации: rootState.auth.authString}}) .then (Рез => {совершающие ( "PUSH_CARS", {автомобили: res.data. данные});.}) поймать (ошибка => {}); }}; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, authString}}) .then (Рез => {фиксации ( "PUSH_CARS", {автомобилей: res.data.data});.}) улов (ошибка => {}); }}; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, authString}}) .then (Рез => {фиксации ( "PUSH_CARS", {автомобилей: res.data.data});.}) улов (ошибка => {}); }}; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, }; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])}, }; экспорт по умолчанию {состояние, геттеры, мутация, действия}; В моей Вьет компоненту: Я просто объявил Бодрствующий на моей собственности siteCars, которые приходят из геттера внутри модуля VueX. Проблема заключается в том, что обработчик никогда не вызывается, когда новые автомобили выталкиваются в состоянии siteCars. смотреть: {siteCars: {Обработчик (значение) {console.log ( "никогда не звонила !!"); }, Глубоко: истинно}}, вычисленная: {... mapGetters ([ "siteCars"])},
wawanopoulos
1

голосов
1

ответ
1.2k

Просмотры

Как смотреть еще два магазина в Vue.js и Vuex?

Я использую Vue.js и Vuex. Я хочу, чтобы посмотреть значение магазина (я делюсь кодами образца в последнем из этого поста). Но я столкнулся с ошибкой «Ошибка: [vuex] store.watch принимает только функцию.» В данном веб-сайте, я обнаружил, как использовать «один» магазин. https://codepen.io/CodinCat/pen/PpNvYr Однако, в моем случае, я хочу использовать «два» магазина. Есть ли у вас какие-либо идеи, чтобы решить эту проблему. ● index.js 'использование строгой'; импорт Вьет из «ви»; импорт Vuex из 'vuex'; импорт {test1Store} от»./modules/test1.js'; импорт {test2Store} от»./modules/test2.js'; Vue.use (Vuex); экспорт Const магазин = новый Vuex.Store ({модули: {test1: test1Store, test2: tes21Store,}}); ● test1.js 'использование строгой'; импорт Вьет из «ви»; импорт Vuex из ' vuex '; Vue.use (Vuex); экспорт Const checkerStore = {пространство имен: истинно, состояние: {количество: 1}, {геттеры: GetCount (состояние) {возвращение state.count; }}}; экспорта по умолчанию {test1}; ● test.vue {{$ store.state.couunt}} импорт {магазин} из»./store/index.js'; экспорта по умолчанию {данные: функция () {возвращение {}}, магазин: магазин, методы: {}, смонтированный () {setInterval (() => {это $ store.state.count ++}, 1000.); . Это $ store.watch (это $ store.getters [ 'test1 / GetCount'], п => {console.log ( 'наблюдали:', п)}.)}}} 1}, {геттеры: GetCount (состояние) {возвращение state.count; }}}; экспорта по умолчанию {test1}; ● test.vue {{$ store.state.couunt}} импорт {магазин} из»./store/index.js'; экспорта по умолчанию {данные: функция () {возвращение {}}, магазин: магазин, методы: {}, смонтированный () {setInterval (() => {это $ store.state.count ++}, 1000.); . Это $ store.watch (это $ store.getters [ 'test1 / GetCount'], п => {console.log ( 'наблюдали:', п)}.)}}} 1}, {геттеры: GetCount (состояние) {возвращение state.count; }}}; экспорта по умолчанию {test1}; ● test.vue {{$ store.state.couunt}} импорт {магазин} из»./store/index.js'; экспорта по умолчанию {данные: функция () {возвращение {}}, магазин: магазин, методы: {}, смонтированный () {setInterval (() => {это $ store.state.count ++}, 1000.); . Это $ store.watch (это $ store.getters [ 'test1 / GetCount'], п => {console.log ( 'наблюдали:', п)}.)}}} /store/index.js'; экспорта по умолчанию {данные: функция () {возвращение {}}, магазин: магазин, методы: {}, смонтированный () {setInterval (() => {это $ store.state.count ++}, 1000.); . Это $ store.watch (это $ store.getters [ 'test1 / GetCount'], п => {console.log ( 'наблюдали:', п)}.)}}} /store/index.js'; экспорта по умолчанию {данные: функция () {возвращение {}}, магазин: магазин, методы: {}, смонтированный () {setInterval (() => {это $ store.state.count ++}, 1000.); . Это $ store.watch (это $ store.getters [ 'test1 / GetCount'], п => {console.log ( 'наблюдали:', п)}.)}}}
ketancho
1

голосов
1

ответ
195

Просмотры

Селен язь не запись, нажмите на вю-звездочный рейтинг компонента

Я использую селен язь для автоматизированного тестирования. Все остальное работает нормально, но селен не запись, нажмите на вю-звездочный рейтинг. Не поднимая любой селектор Xpath / CSS либо. Может кто-нибудь пожалуйста, скажите мне, если бы они имели такой же вопрос, и если они нашли какое-либо решение для него
Haseeb Rehman
1

голосов
0

ответ
294

Просмотры

Лучший способ организовать компоненты в Vuejs

Изображение ниже представляет собой макет, который мы должны реализовать и я собираюсь туда и обратно, как организовать наши компоненты VUE. Эта форма будет использоваться для создания пользователей, но и он будет использоваться для редактирования пользователей, редактировать свой профиль и создание первоначального пользователя при создании компании (запрос бизнеса). Дело в том, в различных сценариях нам понадобятся некоторые части формы будет показать / скрыть или отключен (например, когда пользователь редактируя свой профиль, он не может изменить свои роли или его электронной почты (бизнес-требования), при редактировании электронной почты пользователя и пароль не может быть изменен, и т.д.). То, что мы сделали (но почему-то пахнет тусклый) является то, что мы разделили эту форму на 6 компонентов (UserContactInfo, UserProfileImage, UserGeneralInformation, USERSECURITY, UserAccountOptions, UserRoles) и мы имеем 4 компонентов контейнера, размещающие эти одни (создать пользователя, редактировать пользователь, редактировать свой профиль, создать пользователь компании). Каждый из этих небольших компонентов (UserContactInfo, UserGeneralInformation ...) отвечает за обновление части объекта пользователя в vuex (так UserContactInfo обновит FirstName, LastName, .. и т.д.), и мы должны передать свойства каждой из форм, если это нам нужно, чтобы показать / скрыть или включить / отключить некоторые поля (электронная почта, имя дисплей, и т.д ..). Эта последняя часть я особенно не найден. Является ли это то, что имеет смысл, и это только моя паранойя ног в, или есть более элегантное решение для этого. Спасибо и т.д.), и мы должны передать свойства каждой из форм, если нам нужно, чтобы показать / скрыть или включить / отключить некоторые поля (электронная почта, имя дисплей, и т.д ..). Эта последняя часть я особенно не найден. Является ли это то, что имеет смысл, и это только моя паранойя ног в, или есть более элегантное решение для этого. Спасибо и т.д.), и мы должны передать свойства каждой из форм, если нам нужно, чтобы показать / скрыть или включить / отключить некоторые поля (электронная почта, имя дисплей, и т.д ..). Эта последняя часть я особенно не найден. Является ли это то, что имеет смысл, и это только моя паранойя ног в, или есть более элегантное решение для этого. Спасибо
kljuco
1

голосов
0

ответ
557

Просмотры

Vue.js + Элемент - потери активного класса пункта меню при переключении меню

Я использую библиотеку Element.eleme.io UI с Vue.js 2+ и построение вертикальной боковой панели (документы: http://element.eleme.io/#/en-US/component/menu) Проблема в том, когда Я переключить меню, чтобы развернуть / свернуть, я схожу выбранный активный пункт меню / (в документации всегда реверс по умолчанию один, например) - как сохранить ее между этим переключателем? В настоящее время я даже создал вычисленное значение по умолчанию активные опоры, но он по-прежнему не работает, как я хотел бы: Забавная / Странная вещь, что после переключая меню, проп по умолчанию активных установлен правильно, но активный класс пункта меню исчезнет, ​​и пользователь не знает, какой элемент выбрана.
lukaszkups
1

голосов
0

ответ
66

Просмотры

Vuex Розетки с Node.js

Я использую vuex с розеткой на убунту и макинтош. когда я вернуть объект данных из сокета сервера (Node.js), сокет получить различные данные для каждой операционной системы: - убунт данных возвращают массив с объектом в его первом элементе - данные макинтоша возвращает сам объект я не понимаю, почему это вернуть другую структуру для того же объекта данных и что я могу сделать, чтобы изменить его. Сервер: данные = {данных: элементы, ActionType, actionStatus} this.socket.emit ( 'dataUpdate', данные) vuex мутации: SOCKET_DATAUPDATE: (состояние, данные) => {state.lastAction.status = данные [0] .actionStatus || ложное state.lastAction.type = данные [0] .actionStatus === 'Done'? нуль: (! данных [0] .data) данные [0] .actionType если вернуться // добавить узел, если не существует или слияния, если это делает данные [0] .data.forEach (newD => {константный индекс = state.data .findIndex (д => newD.data.id) Индекс d.data.id === === -1? state.data.push (newD): state.data [индекс] = newD})} TNX :)
korenfine
1

голосов
1

ответ
1.2k

Просмотры

Компонент не обновляется на смену магазина - Vuex

TLDR: Я записал видео, объясняющее мой вопрос, если это помогает. https://youtu.be/Qf9Q4zIaox8 Navbar компонент не обновляется на изменения магазина. Я отделил свой компонент на две части с помощью v-v, если и-то еще. Когда пользователь регистрируется в клиновых, если шоу и когда пользователь is't вошли в систему, V-то еще шоу. Когда я войти в систему, сервер проверяет подлинность, и клиент совершает мутацию в магазин и устанавливает пользователя и клиента маркер. Когда это установлено, он устанавливает свойство в государстве под названием «userIsLoggedIn» истина - это свойство вычисляется в компоненте NavBar. По неизвестным причинам Navbar компонент не обновляется, когда пользователь вошел в систему (несмотря на свойство isLoggedIn быть верным) ПОКА Я обновите страницу. Navbar Компонент: Имя пользователя}} Профиль Депозит Выход FAQ Войти Регистрация FAQ импорт {mapGetters} из "vuex"; экспорт по умолчанию {имя: "Navbar", данные () {возвращение {пользователя:. это $ store.state.user}}, вычисленный: {... mapGetters ([ "isLoggedIn",])}, методы: {Выход из системы () {$ это store.dispatch ( "setToken", нуль). . Это $ store.dispatch ( "SETUSER", NULL); . Это $ router.push ({путь: "/"})}}} Vuex Store: импорт Вью из "вю"; импорт Vuex из "vuex"; импорт createPersistedState из "vuex-persistedstate" Vue.use (Vuex); экспорта по умолчанию новый Vuex.Store ({строгие: истинные, плагины: [createPersistedState ()], состояние: {маркер: нуль, пользователь: нулевой, isUserLoggedIn ложь}, добытчики: {isLoggedIn (состояние) {вернуться state.isUserLoggedIn; }}, {мутации: setToken (состояние, маркер) {state.token = маркер; если (маркер) {состояние. isUserLoggedIn = TRUE; } Еще {state.isUserLoggedIn = ложь; }}, SETUSER (состояние, пользователь) {state.user = пользователь; }}, {Действия: setToken ({} совершают, маркер) {совершить ( "setToken", маркер); }, SETUSER ({} фиксации, пользователь) {совершить ( "SETUSER", пользователь); }}}) Войти Компонент: {{ошибка}} Войти Имя пользователя Пароль Войти импорт AuthenticationService из "../Services/AuthenticationService"; экспорта по умолчанию {имя: "Логин", данные () {возвращение {имя пользователя: "", пароль: "", ошибка: нулевая, в ожидании: ложь,}}, методы: {асинхронная Логин () {попробуйте {// SET ЗАГРУЗКУ SPINNER this.pending = TRUE; // API ЗАПРОС Const ответ = ждут AuthenticationService.login ({имя пользователя: this.username, пароль: this.password,}); console.log (ответ); // Очистить форму this.pending = ложь; this.username = ""; this.password = ""; . Это $ store.dispatch ( "setToken", response.data.token); . Это $ store.dispatch ( "SETUSER", response.data.user); . Это $ router.push ({имя: "Посадка"})} поймать (ошибка) {console.log (ошибка); }}}}
Lorza
1

голосов
1

ответ
1.1k

Просмотры

вя, vuex, вя-i18n изменить язык кнопка событие

Почему изменения мутации не обновлять страницу в новом языке? main.js: здесь я реализовал VUE-i18n с вей: импорт из Vue 'вю' импорт VueRouter из 'ви-маршрутизатор' импорт VueResource из 'ви-ресурсы' импорт VueI18n из 'ви-i18n' импорт локал из»./locales 'импорта маршрутизатор из' './router импорта из магазина' ./store 'импорта App из' Vue.use (VueRouter) Vue.use (VueResource) Vue.use (VueI18n, магазин) Vue.http.interceptors ./app» .С ((запрос, следующий) => {console.log ( 'отправки запроса:', запрос) следующий (ответ => {console.log ( 'ответ:', ответ)})}) = Vue.config.debug истинные Vue.config.lang = 'FA' Object.keys (локалей) .forEach (языки => {Vue.locale (языки, локали [Lang])}) = Const приложение новый Вью ({эль: '#app', маршрутизатор, Const состояние = {локалей: [ 'ан', 'фа'], культура: 'ан'} Const геттеры = {культура: состояние => state.culture} Const действия = {асинхронной changeCulture ({} фиксации, playload) {совершают ( 'ИЗМЕНИТЬ', playload)}} импорта приложение из константных мутаций»../../main.js' = {ИЗМЕНИТЬ (состояние, полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = «ан» console.log (App.i18n)}} экспорт по умолчанию {состояние, геттеры, действия, мутации} Я проверил с помощью инструментов разработки ви в хроме и культурах изменились, но проблема в том, что название {{$ т ( «пример»)}} не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. культура: 'ан'} Const геттеры = {культура: состояние => state.culture} Const действия = {асинхронной changeCulture ({} фиксации, playload) {фиксации ( 'CHANGE', playload)}} импорта App из»../ константные мутации = {CHANGE (состояние, полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = '../main.js ан' консоли .log (App.i18n)}} экспорта по умолчанию {состояние, добытчики, действия, мутации} Я проверил с помощью инструментов разработки ви в хроме и культуре меняется, но проблема в том, что название {{$ т ( «например»)}} не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. культура: 'ан'} Const геттеры = {культура: состояние => state.culture} Const действия = {асинхронной changeCulture ({} фиксации, playload) {фиксации ( 'CHANGE', playload)}} импорта App из»../ константные мутации = {CHANGE (состояние, полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = '../main.js ан' консоли .log (App.i18n)}} экспорта по умолчанию {состояние, добытчики, действия, мутации} Я проверил с помощью инструментов разработки ви в хроме и культуре меняется, но проблема в том, что название {{$ т ( «например»)}} не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. культура} Const действия = {асинхронной changeCulture ({} фиксации, playload) {фиксации ( 'CHANGE', playload)}} импорт App из константных мутаций»../../main.js' = {ИЗМЕНИТЬ (состояние, полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = 'ан' console.log (App.i18n)}} экспорта по умолчанию {состояния, геттеры, действия мутации} Я проверил с помощью VUE инструментов разработки в хроме и культуре меняются, но проблема в том, что название {{$ т ( «пример»)}} не изменяется по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. культура} Const действия = {асинхронной changeCulture ({} фиксации, playload) {фиксации ( 'CHANGE', playload)}} импорт App из константных мутаций»../../main.js' = {ИЗМЕНИТЬ (состояние, полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = 'ан' console.log (App.i18n)}} экспорта по умолчанию {состояния, геттеры, действия мутации} Я проверил с помощью VUE инструментов разработки в хроме и культуре меняются, но проблема в том, что название {{$ т ( «пример»)}} не изменяется по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = 'ан' console.log (App.i18n)}} экспорта по умолчанию {состояние, добытчики , действия, мутации} я проверил с помощью VUE инструментов разработки в хроме и культуре меняются, но проблема в том, что название {{$ т ( «например»)}} не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. полезная нагрузка) {если (state.locales.indexOf (полезная нагрузка)! == -1) {state.culture = полезная нагрузка} еще state.culture = 'ан' console.log (App.i18n)}} экспорта по умолчанию {состояние, добытчики , действия, мутации} я проверил с помощью VUE инструментов разработки в хроме и культуре меняются, но проблема в том, что название {{$ т ( «например»)}} не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. )}} Не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее. )}} Не изменяются по мере изменения мутации. Я знаю, сомневаюсь, что что-то основное неправильно в моем коде, можете вы помочь. Спасибо заранее.
Ahmad Ebrahimi
1

голосов
1

ответ
310

Просмотры

Почему мой добытчик из магазина в App.vue классе неопределенного

Я строй приложения электронного использования VUE, vuex и vuex-машинопись. Поэтому у меня есть следующий код для моего магазина, используя vuex-машинопись: экспорт константного dispaVuex = {пространство имен: истинно, состояние: {диспетчерские: новый грузоотправитель (appState)}, добытчик: {getFTime (состояние: DispatchState): Boolean {вернуть состояние .dispatch.fistTime; },},}; Const {} чтения = getStoreAccessors ( "Тест"); экспорт Const readFtime = читать (dispaVuex.getters.getFTime); После добавления магазина к моему примеру ви я пытаюсь получить доступ к переменной firstTime в моем App.vue так: @Component класс экспорта по умолчанию приложение расширяет Vue {// FTIME: логическое значение; получить FTIME (): Boolean {вернуть readFtime (. это $ магазин); }} При взгляде на отладчик, все в магазине инициализируется отлично, но мой экземпляр App имеет FTIME как неопределенные. Почему это так? Есть ли что-то я не получаю о порядке, как вещи сделаны? PS. firstTime является членом класса Dispatcher
Yazeed Sabri
1

голосов
1

ответ
253

Просмотры

Вызов функции подмешать из магазина

Я пытаюсь сделать вызов апи из компонента ви. Я делаю, что вызов через vuex магазин (так как я прочитал, что это хорошая практика). В магазине действий я хотел бы взаимодействовать с функцией обработки ошибок в у меня есть как функция подмешать в вю инстанции. Но я могу только сделать это, если я прохожу полный VUE экземпляр магазина вызова, как так: это $ store.dispatch ( «магазин / получить», это);. Вызов к Mixin что-то вроде этого: получаем: функция (контекст, объект) {... object.catchError (ошибка) Я хотел бы избежать, чтобы передать это в отправке, но по-прежнему быть в состоянии получить доступ к функции подмешать. Возможно ли это или я должен делать вещи по-другому?
0

голосов
0

ответ
7

Просмотры

Не удалось получить данные из API (Resource заблокирован клиентом) в Vuex

Я пытаюсь загрузить некоторые данные из моего API, используя vuex + AXIOS, но действие дать мне «Network Error» (ERR_BLOCKED_BY_CLIENT). когда я использую JSON-сервер работает нормально, но это не работает с моим API даже с «Allow-Access-Control-Origin»: действия «*» константные действия = {fetchSearch (асинхронные {совершить, состояние}) { пусть Рез попробовать {разреш = ждать AXIOS ( `HTTP: // локальный: 8000 / API / реклама / поиск столбец = название и per_page = $ {state.params.per_page} & search_input = $ {state.params.query.toLowerCase ()} и страница = $ {state.params.page} `, {метод: 'GET', режим: 'нет-CORS', заголовки: { 'Access-Control-Allow-Origin': '*', 'Content-Type': 'применение / JSON'
alejandrohtadinom
1

голосов
1

ответ
1.5k

Просмотры

Vue.js & Vuex - маркер доступа магазин в магазине и перенаправить пользователя на URL для входа в систему

Я пытаюсь сохранить маркер доступа в createStore (index.js), а затем перенаправить пользователя перейти на другую страницу, как только они войти в систему. Для этого нужно создать мутацию в mutations.js, так что я могу установить маркер доступа и установить обновления маркера. Обновления должны быть как штамп времени. Test.vue где код Войти, чтобы проверить пользователя. Таким образом, в основном мне нужно создать функцию, установите маркер доступа, установите refrefresh маркер, а затем перенаправить пользователя на другую страницу, как только они pressh кнопку входа. Спасибо заранее! index.js: импорт vuex из 'vuex'; импорт мутации из»./mutations'; Const createStore = () => {возвратить новый vuex.Store ({состояние: {маркер доступа: "гало", access_token: response.data.access_token, обновление: response.data. refresh_token}, {геттеры: (маркер доступа состояние, геттеры) {вернуть state.accessToken; }}, Мутации}); }; экспорта по умолчанию createStore; mutations.js: Const мутации = {setToken (состояние, лексем) {state.accessToken = маркер; }} мутации экспорта по умолчанию; test.vue: Email отсутствует или неверен. Пожалуйста, попробуйте еще раз! Не действительный адрес электронной почты! Пароль отсутствует или неверен. Пожалуйста, попробуйте еще раз! Вход в систему Детали Некорректное! LogIn импорт Вардар из «Аксиос»; экспорта по умолчанию {данные () {возвращение {эл.адрес: "[email protected]", пароль: "123456", флаг: ложный, неправильно: {электронной почты: ложь, emailFormat: ложь, пароль: ложь, все ложь},} }, методы: {Логин: функция (индекс) {this.wrong.email = ложь; this.wrong.password = ложь; this.wrong.all = ложь; this.wrong.emailFormat = ложь; axios.post ( `https: // api.ticket.co / авт / login`, {электронная почта: this.email, пароль: this.password}) .then (ответ => {// ответов JSON автоматически анализироваться. console.log (response.data) console.log (response.status)}) .catch (е => {console.log (е) console.log (e.response.status) вар vueObject = этот переключатель (e.response .status) {случай 400:! если (vueObject.email) {console.log (1) this.wrong.email = TRUE;} иначе, если (vueObject.emailFormat) {console.log (2) this.wrong.emailFormat = истина;}; если (vueObject!. пароль) {console.log (3) this.wrong.password = TRUE; } перерыв; Случай 401: console.log (4) this.wrong.all = TRUE; перерыв; }})},},}
Aadil Hafesji
1

голосов
0

ответ
189

Просмотры

Backend в приложении Nuxt + Electron

Я использую Nuxe в применении электронного ... Я использую VUEX и мне нужно, чтобы сделать копию локальных данных на сервере (ну, загружать их с сервера по запросу). Какой подход использовать для запросов к серверному приложению на ЭЛЕКТРОН? Я так понимаю, что это необходимо продумать также систему авторизации и так далее?
Amely
1

голосов
1

ответ
151

Просмотры

Vue сделать vuex ответ мутации внешних кликов

Я столкнулся проблемы с Vuex обработки изменений состояния переключается Vuetify навигации ящика снаружи щелчком мыши. В приведенном ниже примере, после открытия, а затем закройте ящик, вам нужно нажать два раза на кнопку, чтобы открыть его снова. Это потому, что при нажатии на кнопку, изменения состояния, но при закрытии ящика (нажав вне его) Vuex не признает изменения состояния, так как правило, это выглядит следующим образом: «->» означает, нажмите Booleans являются государство значения ложные (начальное значение) -> True (на рисунке) -> (снаружи) True (остается такой же) -> ложные (изменения в ложь, как нажать на кнопку, которая запускает функцию => ящик остается закрытым) -> True (изменения состояния, как это должно быть) есть ли способ исправить это? Я имею в виду, мне нужно, чтобы получить Vuex мутации признают за пределами щелкает Спасибо за помощь! DEMO ON CODESANDBOX
1

голосов
2

ответ
504

Просмотры

Управление Вью и обновление состояния другого компонента с vuex

Например, у меня есть файл с именем App.vue и там у меня есть компонент панели навигации. И у меня есть файл с именем Home.vue с компонентом панели инструментов. Дело в том, что мне нужно, чтобы переключить панели навигации состояние (истина или ложь) из компонента панели инструментов в Home.vue (также компонент навигации ящик оказанной в Home.vue). Приведенный ниже код не возвращает ошибку и не изменяет видимость панели навигации. Кроме того, если установить состояние вручную в store.js, панель навигации следует за ним. Может кто-нибудь, пожалуйста, помогите? store.js импорт Вьет из 'вю' импорт Vuex из 'vuex' Vue.use (Vuex) экспорта по умолчанию новых Vuex.Store ({состояние: {ящик: ложь}, мутаций: {toggleDrawer: функция (состояние) {вернуть состояние. выдвижной ящик = state.drawer;}}, действия:! {toggleDrawer ({совершить}) {совершить (» toggleDrawer '); }}, Геттеры: {активна: (состояние) => {возвращение state.drawer; }}}) App.vue ... импорт магазин от './store' экспорта по умолчанию {данные: функция () {возвращение {ящик:. Это $ store.state.drawer}}} Home.vue ... импорт магазин от «../store» экспорта по умолчанию {данные: функция () {возвращение {ящик:. это $ store.state.drawer // Похоже, я не нужен здесь}}}
1

голосов
1

ответ
735

Просмотры

певд Error ( 'Циклическая зависимость' + nodeRep)

Я использовал много диаграмм в моем приложении, и я хочу, чтобы обрабатывать все диаграммы цвета из vuex магазина, как это может возможно. Я использовал ниже код, чтобы сделать это. store.js импорт Вью из «вю» импорта Vuex из «vuex» // Модули импорта настроек из»./modules/settings'; Vue.use (Vuex); экспорт Const магазин = новый Vuex.Store ({модули: {Настройки}}) диаграмма-config.js / ** * Изменение все диаграммы цвета * / импорт {магазин} из "../store/store"; сопз {начальное, предупреждение, ошибка, информация, успех} = store.getters.chartColors; экспорт Const ChartConfig = {цвет: { 'первичный': первичное, 'предупреждение': предупреждение, 'опасность': ошибка, 'успех': успех, 'Информация': информация, 'белого': '#fff', 'светло-серый' : '# E8ECEE'
Shubham
1

голосов
1

ответ
113

Просмотры

Vuejs Watch jumping one tick

I'm developing an app using Vuejs and Vuex. I've got a Vuex module called settings_operations. This module has the following action: async changePassword ({ commit }, { password, id }) { commit(CHANGE_PASSWORD_PROCESSING, { id }) const user = auth.currentUser const [changePasswordError, changePasswordSuccess] = await to(user.updatePassword(password)) if (changePasswordError) { commit(CHANGE_PASSWORD_ERROR, { id, error: changePasswordError }) } else { commit(CHANGE_PASSWORD_SUCCESS, changePasswordSuccess) } } Edit: the to() is https://github.com/scopsy/await-to-js With the following mutations: [CHANGE_PASSWORD_PROCESSING] (state, { id }) { state.push({ id, status: 'processing' }) }, [CHANGE_PASSWORD_ERROR] (state, { id, error }) { state.push({ id, error, status: 'error' }) } And then, in the component I want to use this state slice: computed: { ...mapState({ settings_operations: state => state.settings_operations }) }, watch: { settings_operations: { handler (newSettings, oldSettings) { console.log(newSettings) }, deep: false } } The problem is that when the changePassword action results in an error, the watch doesn't stop in the PROCESSING step, it goes directly to the ERROR moment so the array will be filled with 2 objects. It literally jumps the "processing" watching step. A funny thing that happens is that if I add a setTimeout just like this: async changePassword ({ commit }, { password, id }) { commit(CHANGE_PASSWORD_PROCESSING, { id }) setTimeout(async () => { const user = auth.currentUser const [changePasswordError, changePasswordSuccess] = await to(user.updatePassword(password)) if (changePasswordError) { commit(CHANGE_PASSWORD_ERROR, { id, error: changePasswordError }) } else { commit(CHANGE_PASSWORD_SUCCESS, changePasswordSuccess) } }, 500) }, It works! The watch stops two times: the first tick displaying the array with the processing object and the second tick displaying the array with 2 objects; the processing one and the error one. What am I missing here? Edit: I reproduced the problem here: https://codesandbox.io/s/m40jz26npp
Jesús Fuentes
1

голосов
0

ответ
371

Просмотры

Как получить доступ к объекту из состояния с помощью vuex

Я пытался сделать вызов к API, а также сохранять данные в объекте новостей. Проблема, что у меня есть, что я не могу достигнуть данных новостей объекта в компоненте Home.vue store.js импорта Vue из «вю»; импорт Vuex из "vuex"; импорт {api_key} из @ / конфигурации / secrets.js 'импорт Вардар из 'Аксиос'; Vue.use (Vuex); экспорта по умолчанию новый Vuex.Store ({состояние: {новости: []}, мутации: {}, действия: {GetData () {console.log ( 'выборки данных'); вар заголовок = новые заголовки (); вар конфигурации = {метод: 'GET', заголовки: заголовок, режим: '' CORS, кэш: 'по умолчанию'} Вардар ( 'https://newsapi.org/v2/top-headlines?country=us&apiKey=' + api_key, конфигурации ) .then (= Отвечает> {console.log (Отвечает); this.news = responde.data; }}}), геттеры: {},}); Home.vue В этом компоненте, где я хочу, чтобы показать данные запроса, который я сделал в апи Главной страницы {{содержание}} {импорт mapActions, mapState, mapGetters} из «vuex» экспорт по умолчанию {вычисленный: mapState ([ «новости»]), создано: mapActions ([ «GetData»])} мне удалось решить эту проблему следующим образом Сначала добавьте булеву переменную: загрузка: истинно Тогда в store.js он добавил следующее: мутации: {updateNews (состояние, сообщения) {state.news = сообщения; }, LoadingState (состояние, загрузка) {state.loading = загрузка; }} В функции GetData я написал следующее: совершать ( 'updateNews', responde.data.articles); фиксации ( 'loadingState', False); Дома. вю компонент, я сделал следующие изменения: импорт {mapActions, mapState} от «vuex»; экспорта по умолчанию {вычислен: mapState ([ 'Новости', 'загрузка']), созданный () {это $ store.dispatch ( 'GetData.'); }}
Chris Michael
1

голосов
0

ответ
27

Просмотры

Сделать подменю боковой панели активной даже после перезагрузки страницы

Я хочу сделать врезку активным даже после перезагрузки страницы. Для например, в боковой панели пользователя есть 2 подменю пользователя. Когда я нажимаю на меню пользователя на боковой панели он расширяется и будет показано ниже 2-х полей с активным меню: адрес пользователя Имя пользователя Как я выбрал вариант адрес пользователя он активен в настоящее время, которая работает должным образом. Но я хочу, чтобы оставаться активным даже после перезагрузки страницы. На данный момент, на перезагрузки страницы, пользователь будет боковая панель разрушилась и не активен. В файле данных я определил меню, как указано ниже: {действия: 'zmdi-виджеты', название: 'message.widgets', предметы: [{название: 'message.username', путь: «/ виджеты / user- имя»}, {названия:„“message.useraddress, путь:„/ виджеты / пользователь-адрес“}]} Когда над данными содержит активное поле (булев), которое является истинным, меню боковой панели показывает активным. Я хочу, чтобы активное поле динамически. По приданию статического значения активного поля он отлично работает даже после перезагрузки страницы, но на предоставление динамически его does't работы. Почему кто-то знает? Я управляю всем это с vuex.
Sukhpal Singh
1

голосов
1

ответ
31

Просмотры

Which is the correct method for initialising the moment with Vue?

Я использую магазин Vuex, но я думаю, что этот вопрос будет по-прежнему применяться, если вы не используете магазин. Согласно документации Вьет, правильный способ установки несколько свойств на объекте является использование Object.assign () и создать новый объект. экспорта по умолчанию {состояние: {eventDateMoment: {}}, мутации: {initialiseDate (состояние, полезная нагрузка) {state.eventDateMoment = Object.assign ({}, state.eventDateMoment, момент (payload.eventDate, 'YYYY-MM-DD' )); }}} Насколько я могу видеть, однако, что копирует только поле. Он не копирует методы. Так как я храню объект, который включает в себя методы? Я нашел два подхода, которые появляются на работу, но я не доверяю им, так как они противоречат правилам, изложенным в документации Вью. Я сомневаюсь, что они будут вести себя как отзывчивые собственности должны при любых обстоятельствах. Первый подход заключается просто переназначить свойство в мутаторе. мутации: {initialiseDate (состояние, полезная нагрузка) {state.eventDateMoment = момент (payload.eventDate, 'ГГГГ-ММ-ДД')); }} Второй подход состоит в установку начального значения магазина к объекту момента, а затем использовать Object.assign для слияния в новых свойствах, не создавая новый объект. экспорта по умолчанию {состояние: {eventDateMoment: момент ()}, мутации: {initialiseDate (состояние, полезная нагрузка) {state.eventDateMoment = Object.assign (state.eventDateMoment, момент (payload.eventDate, 'YYYY-MM-DD')) ; }}} Насколько я могу видеть, ни один из них являются приемлемыми. И что'
Kim Prince
1

голосов
0

ответ
146

Просмотры

Проверка Firebase Auth с Вю-маршрутизатором

Проблема заключается в том, что beforeEnter в VUE-маршрутизаторе срабатывает раньше, чем крючок beforeCreate в main.js и имеет секундную задержку, а после перезагрузки действия vuex установок пользователя в состоянии. Это приводит к пользователю быть подпрыгнул на страницу входа в систему. Как я могу отложить проверку beforeEnter VUE-маршрутизатор, пока не vuex установки авторизованного пользователя в состоянии. router.js импорт Вьет из 'вю' импорт маршрутизатора от 'вю-маршрутизатора' импорт Home от импорта AUTH '../views/Home.vue' из '' ./auth Vue.use (Router) экспорта по умолчанию нового маршрутизатора ({ режим работы: 'История', маршруты: [{путь: '/', название: 'дом', компонент: Home}, {путь: '/ оговорки', название: 'Оговорка', компонент: () => импорт (» @ / просмотров / Бронирование / Reservations.vue '), beforeEnter: авт}]}) auth.js импорт {магазин} из "../store"; экспорта по умолчанию (в, из следующего) => {если (store.getters.user) {следующий ()} еще {console.log ( 'Auth') следующий ( '/ зарегистрировались')}} main.js импорта Vue из «Вью» импорта App от импорта маршрутизатора «./App.vue» от «» ./router/router импорта {} из магазина «» ./store импорта firebase из „firebase / приложение“ импорта „firebase / приложение“ импорта конфигурации из './config' новый Вьет ({маршрутизатор, магазин, визуализации: ч => ч (App), beforeCreate () {firebase.initializeApp (конфигурация) .firestore () настройки ({timestampsInSnapshots:. истинные}) console.log ( 'главный') это. $ store.dispatch ( 'authCheck')}}). $ крепление ( '# приложение') магазин / пользователь. нуль)}}, {добытчики: пользователь (состояние) {возвращение state.user}}} В консоли я вижу первый '' AUTH от проверки beforeEnter, а затем 'главный' от beforeCreate. Как вызвать «authCheck» до проверки маршрутизатора
Banged
1

голосов
0

ответ
391

Просмотры

Vuex getter wasn't updated after store mutation

Я создал приложение с помощью VueJS и Vuex. Этот код используется в магазине: константный separateArticle = {состояние: {статья: {}} мутации: {LOAD_ARTICLE (состояние, ID) {выборки ( `HTTP: // локальный: 3000 / Статьи / $ {ID}`, { режим: "CORS"}) .then (соответственно => resp.json ()) .then (ответ => {state.article = ответа;})}}, действия: {loadSeparateArticle ({} фиксации, идентификатор) {фиксации ( "LOAD_ARTICLE", идентификатор);}}, геттеры: {articleData (состояние) {возвращение state.article;}}}; код компонента: Комментарии импортировать статьи из «./Article.vue»; экспорта по умолчанию {реквизита: [ "статья"], название: "ArticleDetail", компоненты: {Статья}, данные () {возвращение {articleData: это $ store.getters.articleData};. }, Созданный () {это. $ Магазин. отправка ( "loadSeparateArticle", это $ route.params._id.); }}; Когда компонент создается газопоглотитель запускается, но после того, как магазин модификации, он не называется. Vue не понимает, что магазин обновляется. Как я могу справиться с этой проблемой?
Spike_Doc
1

голосов
1

ответ
5.2k

Просмотры

Vuex: Вызов добытчиков от действия

Есть ли способ для отправки / действий для вызова поглотителя внутри него? мутации: {SetData (состояние, данные) {= state.data данных; }} действия: {sendDataToServer ({}, совершает полезная нагрузка) {// Вызов геттер (данные) и присвоить переменную // сделать асинхронные функции из возвращаемых данных}}, геттеры: {getAppData: состояние => () => { вернуться state.data; }} Так что лучшая практика здесь? Используя мутацию, чтобы изменить состояние, а затем получить состояние и передать его в действие, которое будет выполнять функции асинхронных или мне нужно сделать, чтобы перестроить свою реализацию? называют мутации -> получить данные через геттер -> действие вызова или делать все это на действиях (делать мутацию на действия и сделать метод действия / асинхронный без необходимости геттера)?
The Bassman
1

голосов
1

ответ
653

Просмотры

Nuxt/Vue reactive body attributes

I want to add the class menu-opened on the body tag when I click on the menu burger div. My div The openMenu method methods: { openMenu() { console.log('open menu launch') this.$store.dispatch('menu/setMenu', true) } } My store state = { isMenuOpen: false } actions = { setMenu({ commit }, value) { commit('SET_MENU_OPEN_STATUS', value) } } mutations= { SET_MENU_OPEN_STATUS(state, newState){ state.isMenuOpen = newState } } On my template, i got this code to add the class on the body based on the state of the isMenuOpen value : export default { data() { return { menuState: this.$store.state.isMenuOpen } }, head () { return { bodyAttrs: { class: this.menuState ? 'menu-opened' : '' } } } } My store is working well, the value change when I click on my div, but it's not adding the class, like if the head function is not reactive... Thanks for your help
Kévin Furet
1

голосов
0

ответ
112

Просмотры

Vue компоненты акций и активов между двумя проектами

Что это лучший способ для совместного использования компонентов и активы между двумя проектами? Я попытался создать локальный пакет NPM, используя НУЮ ссылку, но когда я строй это говорит зависимость не обнаружено. Есть хороший способ сделать это? Кроме того, будут ли активы по-прежнему будут минимизированы / помечены, если они находятся в другом каталоге на активы, то основным в проекте?
srchulo
1

голосов
1

ответ
270

Просмотры

Как использовать Vuex с асинхронным вычисленным сеттер собственности

У меня есть следующий компонент, где у меня есть тема вычислена свойство. Множество функции вычисленной собственности выполняет действие Vuex под названием setTheme, которая возвращает обещание, а также обновляет свойство темы в состоянии Vuex. Light Dark Vue импорт из "вю"; импорт {createNamespacedHelpers} из "vuex"; константный {mapActions} = createNamespacedHelpers ( "тема"); экспорта по умолчанию {вычислен: {Тема: {получить () {вернуть это $ store.state.theme.theme;. }, Установить (значение) {this.setTheme (значение); }}}, Методы: {... mapActions ([ "setTheme"])}}; Беда в том, что theme.get вычислен свойство не вызывается после setTheme завершения обновления радиокнопок с вновь выбранным элементом. Что это лучший способ обойти эту проблему при использовании асинхронных сеттеров. Это то, что выглядит мой Vuex как: экспорт Const состояние = {Тема: «свет»}; экспорт константные мутации = {Тема: (s, р) => (s.theme = р)}; экспорт константные действия: ActionTree = {асинхронная setTheme (контекст, тема) {context.commit ( "тема / тема", тема); // ... опущено ждут Timer.delay (750); // ...}} опущена; Const mainModule = {действия, добытчики, мутации, в пространстве имен: правда, состояние}; экспорта по умолчанию mainModule; константные модули = {другой: otherModule, тема: themeModule}; Const магазин = новый магазин ({модули,}); экспорт магазин по умолчанию; Тема = р)}; экспорт константные действия: ActionTree = {асинхронная setTheme (контекст, тема) {context.commit ( "тема / тема", тема); // ... опущено ждут Timer.delay (750); // ...}} опущена; Const mainModule = {действия, добытчики, мутации, в пространстве имен: правда, состояние}; экспорта по умолчанию mainModule; константные модули = {другой: otherModule, тема: themeModule}; Const магазин = новый магазин ({модули,}); экспорт магазин по умолчанию; Тема = р)}; экспорт константные действия: ActionTree = {асинхронная setTheme (контекст, тема) {context.commit ( "тема / тема", тема); // ... опущено ждут Timer.delay (750); // ...}} опущена; Const mainModule = {действия, добытчики, мутации, в пространстве имен: правда, состояние}; экспорта по умолчанию mainModule; константные модули = {другой: otherModule, тема: themeModule}; Const магазин = новый магазин ({модули,}); экспорт магазин по умолчанию; Const магазин = новый магазин ({модули,}); экспорт магазин по умолчанию; Const магазин = новый магазин ({модули,}); экспорт магазин по умолчанию;
Muhammad Rehan Saeed
1

голосов
0

ответ
203

Просмотры

Почему я не могу прочитать Vuex магазин на «конной» компонента в компоненте Вью?

Это приведет к ложным на смонтированном крючок. Но это установлено в истинное и также возвращает истину по методу, как и ожидалось, или вычисляться собственность или непосредственно даже на V-если = «» заявление! это. $ store.getters.getIsLoggedIn Я хотел бы использовать государство для выполнения действий при установке компоненты, но я предположить, что по каким-то причинам государство не читаемое на данном этапе? Что я не понимая о Vuex?
Jquestions
1

голосов
0

ответ
272

Просмотры

Vuex газопоглотитель не определен, однако магазин имеет правильные данные

Я мутирую данные и подтвердил $ магазина правильно обновляется, однако геттер остается неопределенным. Я использую VUE-DEV-инструменты для устранения неполадок. Слово FETCH_ENDPOINTS из первого компонента, который загружается. Интересный факт: Если закрыть браузер и холодные загрузить приложение-газопоглотитель имеет данные. Если я обновить страницу Поглотитель не определен. Vuex Модуль: константные добытчики = {agentEndpoints: состояние => state.agent.agentEndpoints}; экспорт константные действия = {[FETCH_ENDPOINTS] (контекст) {CcpService.getEndpoints (), то (конечные точки => {console.log ( "действия:".! + JSON.stringify (конечные точки)); // Это имеет правильные данные контекста .commit (SET_ENDPOINTS, конечные точки);}); }}; экспорт константные мутации = {[SET_ENDPOINTS] (состояние, конечные точки) {console.log ( "мутация:" + JSON.stringify (конечные точки)); // Это правильные данные! state.agent.agentEndpoints = конечные точки; }};
Chris Newell
1

голосов
0

ответ
201

Просмотры

Vue.Js Вардар получить запрос не проходит

журнал ( `вошли после request`); // это не нужно регистрироваться console.log (разрешение); }). Задвижка (ERR => console.log (ERR))}}}), кроме того, я не получаю ошибки на всех от блока поймать, может кто-нибудь сказать мне, что я здесь отсутствует? заранее спасибо.
Swilam Muhammad
1

голосов
1

ответ
25

Просмотры

Vuex состояние с таким же названием получает обнуляется

У меня есть модуль Vuex с государством, как это: Const состояние = {пункты: [], SelectedItem: {ID: нулевое, имя: «»}} И в моем я позволить пользователю добавить SelectedItem к пунктам массиву. Однако, когда я установил SelectedItem Я хочу, чтобы очистить старую, поэтому я бег мутации, которая в основном устанавливает идентификатор и имя нуля. Но это, кажется, очистить идентификатор и имя SelectedItem в массиве элементов также! Моя клиринг мутация выглядит следующим образом: clearSelectedItem: функция (состояние) {state.items.selectedItem.id = NULL; state.items.selectedItem.name = ""; }, В моем понимании это должно очистить только SelectedItem вне массива пунктов, но она очищает абсолютно все. Есть ли синтаксис я могу использовать, чтобы просто получить единственный SelectedItem?
djur999
1

голосов
0

ответ
109

Просмотры

Амазонка-Cognito-vuex-модуль Логин броски Пользователь не имеет права получить Auth детали

Я пытаюсь проверку подлинности с использованием пакета амазонка-Cognito-vuex-модуль https://github.com/Botre/amazon-cognito-vuex-module Ниже мой код конфигурации Cognito: экспорт по умолчанию новый Vuex.Store ({модули: {Auth , Cognito: новый AmazonCognitoVuexModule ({регион: 'мы-восток-1', userPoolId: '', ClientId: ''})}, строгие: отладки}), и это, как я пытаюсь аутентификация пользователя:. это $ магазин. отправка ( 'authenticateUser', {электронная почта: this.input.username, пароль: this.input.password}) функция authenticateUser выглядит следующим образом: authenticateUser ({коммит, состояние}, полезная нагрузка) {вернуть новый Promise ((решимость, отклонить) => {совершить ( 'setAuthenticating', истинную) константную электронной почту = payload.email сопзИте пароль = полезную нагрузку.пароль Const пользователя = новый CognitoUser ({Имя пользователя: электронная почта, Pool: state.pool}) user.authenticateUser (новые AuthenticationDetails ({Имя пользователя: электронная почта, пароль: пароль}) {OnFailure: функция (ошибка) {совершить ( 'setAuthenticating' , ложно) отклонить (ошибка)}, OnSuccess: функция (сеанса) {фиксации ( 'setAuthenticating', ложно) фиксации ( 'setAuthenticated', пользователь) разрешает (сеанс)}, newPasswordRequired: функция (userAttributes, requiredAttributes) {фиксации (» setAuthenticating», ложь) удалить userAttributes.email_verified // неизменяемое поле user.completeNewPasswordChallenge (payload.newPassword,userAttributes, это)}})})} Получение следующее сообщение об ошибке в ответ: { "__type": "NotAuthorizedException", "сообщение": "Пользователь не имеет права получить Auth детали"}
Mazhar Iqbal
1

голосов
1

ответ
53

Просмотры

Как визуализировать бесконечный цикл для вю бесконечного цикла обновления

У нас есть довольно сложная / вложенная система с большим количеством использования Vuex среди вложенных компонентов Vue. Я часто нарваться на предупреждение, [Вью предупредит]: Вы можете иметь функцию бесконечный цикл обновления в компоненте визуализации. Эти бесконечные циклы, не так легко найти, и принимали меня долгое время отладки. Я смотрю на Vue предупреждение трассировки стека и посмотрите на последнюю функцию, которая была вызвана в моем коде, но это не делает его вообще для меня очевидно, почему или где бесконечный цикл существует. Я предполагаю, что в этих труднодоступных отлаживать случаи, что некоторые родительский компонент хочет вновь сделать в результате изменения моего Субкомпонента, поэтому затем суб-компонент работает тот же функция vuex снова, в результате чего родительского компонента для повторной визуализации , так далее., но я никогда не могу проследить, чтобы подтвердить или узнать, какие именно функции вызывает то, что часть родительского компонента или сам повторной визуализации. Я интересно, если есть какой-то способ визуализировать или увидеть бесконечное Vue петли застревания в? Я пытался исследовать __ob__ и тому подобное, но есть так много Deps и подводные лодки, что я не понимаю, где проблема или что на самом деле нужно искать в DEPS и переходниками. Я по-прежнему возникают проблемы с пониманием того, что конкретно бесконечный цикл каждый раз, когда это происходит. Есть ли способ, чтобы сказать Vue идти в бесконечный цикл, так что я могу видеть трассировки стека или какой-либо другой подход отладки я могу использовать? т понять, где проблема или что на самом деле нужно искать в DEPS и переходниками. Я по-прежнему возникают проблемы с пониманием того, что конкретно бесконечный цикл каждый раз, когда это происходит. Есть ли способ, чтобы сказать Vue идти в бесконечный цикл, так что я могу видеть трассировки стека или какой-либо другой подход отладки я могу использовать? т понять, где проблема или что на самом деле нужно искать в DEPS и переходниками. Я по-прежнему возникают проблемы с пониманием того, что конкретно бесконечный цикл каждый раз, когда это происходит. Есть ли способ, чтобы сказать Vue идти в бесконечный цикл, так что я могу видеть трассировки стека или какой-либо другой подход отладки я могу использовать?
Julie
1

голосов
0

ответ
38

Просмотры

Vuex долго фиксация снижения функции

Насколько я понял, vuex редукторы, которые синхронны, не следует принимать слишком долго, чтобы закончить, чтобы сохранить vuex готовы получить больше восстановителей без перегрузки слишком много. Действия, с другой стороны, могут занять больше времени, чтобы работать, так как они асинхронные. Вопрос заключается в том, если я хочу, чтобы удалить п элементы из массива, хранящийся в магазине, мой лучший вариант был бы удалить их по одному с несколькими редукторами, или просто использовать один редуктор и завершить его в O (п)? Первоначально я думал о создании нового списка в действии, подобно оригиналу, но без элемента я хотел удалить, а затем использовать редуктор просто заменить оригинальный список с новым, проблема заключается в том, что, поскольку действие является асинхронным , первоначальный список может меняться в течение действия и, таким образом, я мог бы потерять эти изменения. Есть ли лучшая практика для такой ситуации? Спасибо!
Shay Yzhakov
1

голосов
0

ответ
86

Просмотры

Vuex: как отобразить все данные состояния в локальные свойства?

Я хочу, чтобы отобразить все данные о состоянии местных вычисленных свойств, способ ее достижения вычисляется: {... mapState ([ «data1», «data2», ...])}, но если есть много данных в передать, есть простой способ, я могу сопоставить все данные о состоянии местных вычисленных свойств?
jr6tp
1

голосов
0

ответ
50

Просмотры

Proper way to handle Query Cursor in Google Firestore? (Vue/Nuxt.js)

Я бег приложения чата с Firebase Firestore и работает все супер хорошо, но я бег в следующий вопрос: Для постраничных моих разговоров & чаты я использую курсоры запроса для моих слушателей. Я сохранить эти курсоры запроса в моем состоянии (vuex), так что я могу получить доступ к ним позже, когда это необходимо. Это работает и я могу постраничный мои сообщения чата и беседу. Я создаю курсоры запроса следующим образом: Const = запрос AWAIT ref.get () константные курсор = query.docs [query.docs.length - 1] фиксации ( «SET_CONVERSATIONS_QUERY_CURSOR», курсор), а затем использовать их в следующем запросе, как так: .startAfter (state.conversations.queryCursor) Все на самом деле работает отлично. Моя проблема в настоящее время является то, что курсор сохраняется в моем государстве, кажется, регулярно обновляется (... почему Firebase?) И особенно непосредственно. Это дает мне следующее сообщение об ошибке при использовании vuex строгого режима (-> не имеет доступа к нему напрямую): app.js: 506 Ошибка: [vuex] Не мутировать vuex магазин состояние за пределами обработчиков мутации. Теперь я, конечно, хочу использовать строгий режим, чтобы избежать состояния мутации непосредственно, но я не могу из-за курсоры запросов в моем состоянии. Я пытался клонировать курсор перед сохранением в магазин, но неглубокие клоны делали никаких хороших и глубоких клонов не работали из-за преобразование круговой структуры в формате JSON. Так что ... Есть рекомендуемый способ, как сохранить курсоры запроса для последующего использования? Есть варианты, чтобы просто хранить идентификатор документа, а затем «воссоздать» курсор запроса? Спасибо! Теперь я, конечно, хочу использовать строгий режим, чтобы избежать состояния мутации непосредственно, но я не могу из-за курсоры запросов в моем состоянии. Я пытался клонировать курсор перед сохранением в магазин, но неглубокие клоны делали никаких хороших и глубоких клонов не работали из-за преобразование круговой структуры в формате JSON. Так что ... Есть рекомендуемый способ, как сохранить курсоры запроса для последующего использования? Есть варианты, чтобы просто хранить идентификатор документа, а затем «воссоздать» курсор запроса? Спасибо! Теперь я, конечно, хочу использовать строгий режим, чтобы избежать состояния мутации непосредственно, но я не могу из-за курсоры запросов в моем состоянии. Я пытался клонировать курсор перед сохранением в магазин, но неглубокие клоны делали никаких хороших и глубоких клонов не работали из-за преобразование круговой структуры в формате JSON. Так что ... Есть рекомендуемый способ, как сохранить курсоры запроса для последующего использования? Есть варианты, чтобы просто хранить идентификатор документа, а затем «воссоздать» курсор запроса? Спасибо! Есть рекомендуемый способ, как сохранить курсоры запроса для последующего использования? Есть варианты, чтобы просто хранить идентификатор документа, а затем «воссоздать» курсор запроса? Спасибо! Есть рекомендуемый способ, как сохранить курсоры запроса для последующего использования? Есть варианты, чтобы просто хранить идентификатор документа, а затем «воссоздать» курсор запроса? Спасибо!
Pascal
1

голосов
1

ответ
246

Просмотры

How to access a mapAction method using Vuejs?

Regards, I would like to know how I can access the logOut function that comes from mapActions, What I do not understand is how it is possible, that with the logIn function when I refer to it, it works for me but with the function of logOut no. Here is the error: Uncaught ReferenceError: logOut is not defined Here I leave the code: Active: {{ bottomNav }} Messages chat Notifications notifications LogIn whatshot {{ item.icon }} {{ item.title }} import { mapActions, mapState } from 'vuex'; export default { name: 'home', computed: mapState(['data' , 'loading']), data(){ return{ bottomNav: 'LogIn', items: [ { icon: 'account_circle', href: '#', title: 'Profile', click: '' }, { icon: 'settings', href: '#', title: 'Settings', click: '' }, { icon: 'fullscreen_exit', href: '#', title: 'Logout', click: () =>{ this.logOut(); } } ] } }, methods:{ ...mapActions(['logIn' , 'logOut']), }, } Actions.js Im getting this error: Uncaught TypeError: Cannot set property 'data' of undefined this error is pointing to the mutation file in the UPDATE_DATA. import { GROUP_ID } from '../config/env'; export const actions = { logIn({state , commit}){ FB.login((res) =>{ console.log(res); if(res.status == "connected"){ state.user.id = res.authResponse.userID; state.user.accessToken = res.authResponse.accessToken; console.log("user:%s\ntoken:%s" , state.user.id , state.user.accessToken); FB.api('/me' , (res) =>{ this.user.username = res.authResponse.name; }); FB.api(`/${GROUP_ID}/feed`,'GET', (res) =>{ if(res && !res.error){ res['data'].forEach((data) =>{ console.log("api connection => " , data); commit('UPDATE_DATA' , data); commit('IS_LOADING_DATA' , false); }); } }); } },{scope:'public_profile, email, groups_access_member_info'}); }, logOut({state}){ console.log(state.user.accessToken); try{ if(FB.getAccessToken() != null) { FB.logout(function(res) { console.log("User is logged out"); console.log(res); }); }else{ console.log("User is not logged in"); } }catch(err){ console.log(err); } } } Mutations.js export const mutations = { UPDATE_DATA({state} , payload){ state.data = payload; }, IS_LOADING_DATA({state} , payload){ state.loading = payload; } }
Chris Michael
1

голосов
1

ответ
244

Просмотры

Слушайте действия / мутации от в пределах vuex модулей

У меня есть vuex магазин с несколькими модулями, и я хочу, чтобы иметь возможность слушать «глобальной» отправки или совершения вызовов (ака действия и мутации) из внутри модуля. Например, в модуле Идента есть действия, такие как логин и выход из системы. Всякий раз, когда эти действия посланы, я хочу другой модуль пользовательского интерфейса также выполнить некоторые действия, например, установив язык, основанный на вошедшего пользователя. Я знаю, что я могу просто послать пользовательский интерфейс действия внутри входа и выхода из системы действий в модуле AUTH. Но я предпочел бы это наоборот, так что пользовательский интерфейс прослушивания событий (действий и / или мутации), пересылаемых в авт. Таким образом, я могу легко создавать побочные эффекты, не меняя «оригинальный» vuex модуль. Может быть, мне нужно использовать часы, но некоторые действия не изменяют состояние, так что я не всегда могу их использовать. Создание плагина также вариант, но я не хочу, чтобы создать дополнительный Plugin каждый раз, когда я хочу создать такой побочный эффект. Так мой вопрос; внутри модуля vuex, как я могу слушать действия / мутации, пересылаемых из других модулей?
Wessel van der Linden
1

голосов
0

ответ
145

Просмотры

Testing vuex mocked mutation with jest

I have been testing my vuex store with the following structure /src/store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const state = { data: [] }; export const mutations = { SET_DATA(state, data) { state.data = data; } }; export const actions = { fetchData({ commit }) { fetch("https://jsonplaceholder.typicode.com/users") .then(res => res.json()) .then(data => commit(SET_DATA, data)) .catch(err => console.log(err)); } }; export default new Vuex.Store({ state, mutations, actions }); My test file for actions asserts for the url and commit triggering it("should fetch correct data and commit to store", () => { // Mock fetch global.fetch = jest.fn().mockImplementationOnce(() => Promise.resolve({ status: 200, json: () => Promise.resolve(JSON.stringify(mockData)) }) ); return store.dispatch("fetchData").then(() => { expect(global.fetch).toHaveBeenCalledWith( "https://jsonplaceholder.typicode.com/users" ); expect(mockSetData).toHaveBeenCalled(); }); }); Currently my test passes only for URL and does not call mockSetData which is a jest mocked function. I'm new to TDD and not quite sure why this fails. Here's an implementation on codesandbox for more context
bruhbruh
1

голосов
1

ответ
138

Просмотры

Как связать значение идентификатора, но отображать значение имени, используя Buefy подсказки?

Я пытаюсь интегрировать Buefy подсказки на моем сайте. Мои данные представляют собой массив объектов, каждый из которых содержит целочисленный идентификатор и имя String. Как так страны: [{ID: 1 Имя: «Страна 1»}, {ID: 2 Имя: «Страна 2»},] Как говорится в документации свойство поля используется для отображения в качестве выбранного значения и возвращает то же самое значение, я хотел бы использовать свойство имени в качестве отображения текста, но идентификатор в качестве выбранного варианта. Кроме того, когда я получаю результат от API я получить идентификатор страны, и я хотел бы, чтобы установить значение на основе идентификатора Вот пример скрипку Любая помощь будет оценена.
Naresh
1

голосов
1

ответ
167

Просмотры

Vuex геттеры не обновляются после того, как магазин повторной гидратации от постоянного хранения

Я столкнулся странные проблемы с моей установкой Electron + Вью. УСЛОВИЯ: Electron + Vue (я использовал шаблонный) + vuex-упорствовать (также пытались vuex-persistedstate и vuex-persistfile). ПРОБЛЕМА: Vuex добытчики остаются 0 / нуля / «», когда магазин регидратации. Как я знаю, что? Если локальное хранилище чистое (я запустить приложение в первый раз), первые мутации обновления состояния (добытчики возвращают правильные значения), и я могу видеть объект добавляется в локальном хранилище браузера. Когда приложение перезапускается, однако, мутации вызывают состояние и локальное обновление памяти так же, как и раньше, но добытчики остаются пустыми / по умолчанию. Ниже геттер возвращает пустой массив. УСТАНОВКА: У меня есть приложение, которое работает с 3-й партии API: получает данные, вычисляет материал и отправляет некоторые данные обратно. API также требует авторизации. Ниже моя структура Vuex. Часть моего состояния объекта ... Const состояние = {лексема: '', проекты: [], work_packages: [], timeEntriesLocal: []} ... и один из моих добытчиков: Const добытчики = {todayLog () {функция Sameday (d1, d2) {возвращение d1.getFullYear () === d2.getFullYear () && d1.getMonth () === d2.getMonth () && d1.getDate () === d2.getDate ()} записей вар = state.timeEntriesLocal вар todayEntries = [] entries.forEach (элемент => {вар дата = element.spentOn вар сегодня = новый Date (), если (Sameday (дата, сегодня)) {todayEntries.push (элемент)}}) возвращает todayEntries}} Это возвращает запись из массива, которые из-за «сегодня». timeEntriesLocal заполняется с помощью этого метода: addTimeEntry () {пусть запись = {идентификатор:. это $ store.state.UserData.timeEntriesLocal.length + 1, проект: это.
Vitaliy Gladiyenko

Просмотр дополнительных вопросов