时间戳

首页 > 解决方案 > Vuex商店从firebase返回对象结果不起作用

vue.js - Vuex商店从firebase返回对象结果不起作用

问题描述

我一生都无法弄清楚为什么这不起作用，所以希望您能提供帮助

我要做的只是通过 vuex 商店而不是在我的组件中获取请求，就像我目前作为学习 vue/nuxt 的一部分所做的那样，但只是无法让它按如下方式工作，任何人都可以看到我的内容我做错了请

烦恼商店

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
    },

谁能告诉我为什么我将结果返回到我的操作中，而不是返回到我的 getter 或组件中

谢谢

标签： vue.jsaxiosvuex

解决方案

您需要将您的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 代码作为基础。

推荐阅读