Question

我不能为我的生活弄清楚为什么这不起作用所以希望你能够提供帮助

我想要做的就是通过vuex商店而不是我的组件中获取请求，因为我目前正在学习vue / nuxt，但是无法让它按照以下方式工作，任何人都可以看到我做错了什么

vex商店

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

任何人都可以告诉我为什么我的结果会回到我的行动而不是我的吸气剂或组件

由于

Answer 1

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

Vuex存储从firebase返回对象结果不起作用

1 个答案: