Question

我正在尝试从Firebase获取一些数据。我有一个store.js，并导入了main.js。因此，问题是，页面加载后数据没有正确打印出来。但是，console.log中的突变显示数据已正确提取。我猜问题是，该操作能够获取数据并更新状态，但是，在更改计算属性之前呈现页面吗？我注意到的另一件事是，每当我编辑某些内容并将其保存在vscode中时，内容就会突然显示出来，但是如果刷新页面，该内容就会消失。我认为这也意味着确实提取了数据，但是没有显示出来。想知道是否有人可以提供帮助。真的很感激。

// store.js

mport Vue from 'Vue'
import Vuex from 'vuex'
import globalAxios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    dietRecords: {
      breakfest: {},
      lunch: {},
      dinner: {},
      snacks: {}
    }
  },
  mutations: {
    setDietRecords (state, data) {
      state.dietRecords = data
      console.log(state.dietRecords) // this print out correct data
    }
  },
actions: {
    fetchData ({commit, state}) {
      globalAxios.get('my_data.json')
      .then(res => {
        const data = res.data;
        const resultArray = {
          breakfest: {},
          lunch: {},
          dinner: {},
          snacks: {}
        };
        for (let key in data) {
          resultArray[data[key].meal_type][key] = data[key]
        };
        commit('setDietRecords', resultArray)
      })
    }
  },
  getters: {
    dietRecords (state) {
      return state.dietRecords
    }
  }
})

//myapp.vue
import { mapState } from 'vuex';
import axios from 'axios';
import EditRecord from "./editRecord.vue"

export default {
  data: function() {
    return {
      addRecord: {
        breakfest: false,
        lunch: false,
        dinner: false,
        snacks: false
      }
    }
  },
  computed: {
    diet () {
        return this.$store.getters.dietRecords
    }
  },
  methods: {
    fetchData() {
      this.$store.dispatch('fetchDietRecords')
      console.log(this.diet)
    }
  },
  created() {
    this.$store.dispatch('fetchDietRecords')
  }
}

Answer 1

首先，您正在调用fetchDietRecords操作，但它的名称是fetchData。第二，您的fetchData方法是异步的，这意味着可能需要1秒钟才能进行axios调用，但是console.log会立即被调用。解决方案是从axios调用返回promise，然后在返回的promise上调用或使用async await。

return globalAxios.get('my_data.json') // in your action

第一个：

this.$store.dispatch('fetchDietRecords').then(() => {
    console.log(this.diet)
})

第二个：

created() {
    this.foo()
},
methods: {
   async foo() {
     await this.$store.dispatch('fetchDietRecords')
     console.log(this.diet)
    }
}

希望这会有所帮助

Answer 2

虽然已经有一段时间了，但是我实际上是自己解决的。所以原因是我应该从“ vue”而不是“ Vue”导入Vue。经过大量工作后，这是一个很小的错误。希望这对其他人有帮助...请先检查您的包裹名称！

Vuex状态通过操作进行更新，但是计算出的属性没有响应

2 个答案: