时间戳

首页 > 解决方案 > Vuex 状态由操作更新，但计算属性没有响应

vue.js - Vuex 状态由操作更新，但计算属性没有响应

问题描述

我正在尝试从 firebase 获取一些数据。我有 a 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')
  }
}

标签： vue.jsvuejs2vuex

解决方案

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

推荐阅读