Хранилище Vuex для возврата результатов объекта из firebase не работает - PullRequest
Новая
       8

Хранилище Vuex для возврата результатов объекта из firebase не работает

0 голосов
/ 08 июня 2018

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

Все, что я пытаюсь сделать, - это получить запрос через магазин vuex, а не вмой компонент, которым я сейчас занимаюсь, как часть моего обучения vue / nuxt, но просто не может заставить его работать следующим образом, может кто-нибудь увидеть, что я делаю не так, пожалуйста

vex store 

import Vuex from "vuex";
import axios from "axios";
const URL = 'MYPATH';
const logStore = () => {
return new Vuex.Store({

state: {
  logItems: {}
},

actions: {

  setLog ({ commit }) {
    axios
      .get('URL')
      .then(r => r.data)
      .then(logItems => {
        console.log(logItems) // I am getting back my results in log here
        })
      .then(logItems => {
      commit('logItems', logItems)
    })
  }, 
},

mutations: {
  logItems (state, logItems) {
    state.logItems = logItems
  },

getters: {
    logItems(state) {
        return state.logItems // log console here is empty object
      }
},

});
};

экспорт по умолчанию logStore;

В моем компоненте у меня есть 

    import { mapState } from 'vuex'

 created () {
    this.$store.dispatch('setLog', this.logItems)
    console.log(this.$store.getters.logItems) // empty object here
    },

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

Спасибо

1 Ответ

0 голосов
/ 08 июня 2018

Вам нужно будет вернуть свой logItems здесь, чтобы следующий then имел к нему доступ 

.then(logItems => {
    console.log(logItems) // I am getting back my results in log here
    return logItems;
})

Когда вы используете без фигурных скобок, все, что у вас есть в теле функции, автоматически возвращаетсякак у вас здесь 

.then(r => r.data)

Однако, когда вы используете фигурные скобки, если вам нужна следующая функция в цепочке, чтобы получить значение, вам нужно вернуть его и получить в следующей функции 

.then(logItems => {
    console.log(logItems)
    return logItems
})
.then(thisWillBeTheReturnAbove => { // ... code ... })

РЕДАКТИРОВАТЬ

Как упоминалось в комментариях, я создал репозиторий GitLab с примером, который вы можете найти здесь http://gitlab.com/vitorleite/vue-firebase-todo.

Вы должны иметь возможность клонировать и запускать его локально, выполнив npm install и npm run serve, вам нужно изменить store.js, чтобы включить свою конечную точку Firebase.Я оставил тот, который использовал в комментарии, но в какой-то момент я изменю разрешения на read-only.

Я создал проект, используя @ vue / cli 3.0 ив качестве основы использовал образец кода JsFiddle Vue Todo.

...