Javascript Vuex存储区中的值一经可用即不反应

因此，我正在使用

vue resource

从api检索数据，这是正确的，状态已更新，并且从控制台可以看到我请求的值。我的问题是，当应用程序从存储区加载数据时，似乎不会影响加载的应用程序，但例如，如果我在页面之间更改，则信息会正确显示。这让我相信，在这一过程中，我的生命周期挂钩不正确，或者我在vuex中错误地处理了状态

Vuex商店

import Vue from 'vue'
import Vuex from 'vuex'
import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.use(Vuex)

const state = {
  twitter: 0,
  instagram: 0,
  youtube: 0,
  twitch: 0
}

const actions = {
  LOAD_METRICS: ({commit}) => {
    Vue.http.get('http://109.74.195.166:2000/metrics').then(response => {
      let out = [{
        twitter: Number(response.body[0].twitter),
        instagram: Number(response.body[0].instagram),
        youtube: Number(response.body[0].youtube),
        twitch: Number(response.body[0].twitch)
      }]
      commit('SET_METRICS', out)
    }).catch((e) => {
      console.log(e)
    })
  }
}

const mutations = {
  SET_METRICS (state, obj) {
    state.twitter = obj[0].twitter
    state.instagram = obj[0].instagram
    state.youtube = obj[0].youtube
    state.twitch = obj[0].twitch
  }
}

const getters = {}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

在这里，我试图通过一个变异来调度一个事件来收集所需的信息

<template>
  <div id="app">
    <NavigationTop></NavigationTop>
    <router-view></router-view>
    <SocialBar></SocialBar>
    <CopyrightBar></CopyrightBar>
  </div>
</template>

<script>

  export default {
    name: 'app',
    ready: function () {
      this.$store.dispatch('LOAD_METRICS')
    }
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');

  #app {
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: white;
    background: url('./assets/Images/bodyBackground.jpg');
  }
</style>

导出默认值{
名称：“应用程序”，
就绪：函数（）{
此.$store.dispatch（'LOAD\u METRICS'））
}
}
@导入url（'https://fonts.googleapis.com/css?family=Roboto:400,700,900');
#应用程序{
字体系列：“Roboto”，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：白色；
背景：url（'./assets/Images/bodyBackground.jpg'）；
}

最后，我请求countup.js使用的组件内部的信息，并将其提供给数据内部的方法

<template>
  <div class="hero">
    <div class="container hero-content">
      <div class="row hero-back align-items-end">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-lg-6" v-for="icons in socialIcons">
              <Hero-Tile
                :name="icons.name"
                :icon="icons.iconName"
                :count="icons.count"
                :numeric="icons.numeric"
              ></Hero-Tile>
              <h1>{{origin}}</h1>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="diagonal-left-lines"></div>
    <div class="home-hero-img"><img class="img-fluid" src="../../assets/Images/home-hero.jpg"></div>
  </div>
</template>

<script>
  import HeroTile from './Hero-Tile'
  import CountUp from 'countup.js'

  export default {
    components: {HeroTile},
    name: 'hero',
    data () {
      return {
        origin: '',
        socialIcons: [
          {
            name: 'twitter',
            iconName: 'twitter',
            count: this.$store.state.twitter,
            numeric: 26000
          },
          {
            name: 'instagram',
            iconName: 'instagram',
            count: this.$store.state.instagram,
            numeric: 35000
          },
          {
            name: 'youtube',
            iconName: 'youtube-play',
            count: this.$store.state.youtube,
            numeric: 15000
          },
          {
            name: 'twitch',
            iconName: 'twitch',
            count: this.$store.state.twitch,
            numeric: 127000
          }
        ]
      }
    },
    methods: {
      updateNumbers: function () {
        let options = {
          useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: 'K'
        }

        function kFormatter (num) {
          return num > 999 ? (num / 1000).toFixed(1) : num
        }

        let twitter = new CountUp('twitter', 0, kFormatter(this.$store.state.twitter), 0, 3, options)
        let instagram = new CountUp('instagram', 0, kFormatter(this.$store.state.instagram), 0, 3, options)
        let youtube = new CountUp('youtube', 0, kFormatter(this.$store.state.youtube), 0, 3, options)
        let twitch = new CountUp('twitch', 0, kFormatter(this.$store.state.twitch), 0, 3, options)
        twitter.start()
        instagram.start()
        youtube.start()
        twitch.start()
      }
    },
    mounted: function () {
      this.updateNumbers()
    }
  }
</script>

{{origin}}
从“./Hero Tile”导入HeroTile
从“CountUp.js”导入CountUp
导出默认值{
组件：{HeroTile}，
名字：'英雄'，
数据（）{
返回{
来源：''，
社会党人：[
{
名称：“推特”，
我的名字是：“推特”，
计数：这个。$store.state.twitter，
数字：26000
},
{
名称：“instagram”，
iconName:“instagram”，
计数：这个。$store.state.instagram，
数字：35000
},
{
名称：“youtube”，
我的名字是：“youtube播放”，
计数：这个。$store.state.youtube，
数字：15000
},
{
名称：“twitch”，
我的名字是：“抽搐”，
计数：这个。$store.state.twitch，
数字：127000
}
]
}
},
方法：{
updateNumbers:函数（）{
让选项={
对,，
对,，
分隔符：'，'，
十进位：'.'，
前缀：“”，
后缀：“K”
}
函数kFormatter（num）{
返回数值>999？（数值/1000）。toFixed（1）：数值
}
让twitter=newcountup（'twitter'，0，kFormatter（this.$store.state.twitter），0，3，选项）
让instagram=new CountUp（'instagram'，0，kFormatter（this.$store.state.instagram），0，3，选项）
让youtube=new CountUp（'youtube'，0，kFormatter（this.$store.state.youtube），0，3，选项）
让twitch=new CountUp（'twitch'，0，kFormatter（this.$store.state.twitch），0，3，选项）
twitter.start（）
instagram.start（）
youtube.start（）
twitch.start（）
}
},
挂载：函数（）{
this.updateEnumbers（）
}
}

---

现在需要明确的是，它似乎只是加载了“0k”，所以好像有某种形式的竞争条件发生，导致它在加载时没有实际加载信息。虽然我不确定这里的正确方法是什么。

这最终被我将要描述为黑客行为的方法解决了，因为此时我实际上不知道确切的正确答案。虽然我所拥有的确实有用

关注点如下：

贮藏

在上面，我现在在发送分派事件时发送当前

store.state.metrics.loaded

的实例。然后对其进行检查以查看当前值的真实性，因为第一次加载应始终返回false，因此我们将使用API调用返回一个承诺，同时还将对存储进行变异，以便获得以后的值。因此，由于我们将加载的事件变为true，接下来的实例将返回true值，并且将解析新的承诺，因此我们可以确保

.then（）

处理程序存在

组成部分

created: function () {
      this.$store.dispatch('LOAD_METRICS', this.$store.state.metrics.loaded).then((res) => {
        if (res !== 'loaded') {
          this.updateNumbers(res)
        } else {
          this.socialIcons[0].count = this.kFormatter(this.$store.state.metrics.twitter) + 'K'
          this.socialIcons[1].count = this.kFormatter(this.$store.state.metrics.instagram) + 'K'
          this.socialIcons[2].count = this.kFormatter(this.$store.state.metrics.youtube) + 'K'
          this.socialIcons[3].count = this.kFormatter(this.$store.state.metrics.twitch) + 'K'
        }
      })
    }

在我们的组件

created

生命周期钩子中，我们然后使用生成的值来标识再次在DOM中创建组件时要采取的路径，这次只需加载值并允许正常的数据绑定来更新DOM

---

我相信有一种更好的方法，可以在动作设定器中仔细考虑状态逻辑，并返回一个本质上是多余的承诺，而不是为了确保

。then（）

句柄存在。

存储变量在

数据中不是被动的。必须在计算属性中使用它们。这就是为什么它在页面加载时不起作用，而在页面更改时起作用。B/c当您更改页面时，ajax已经完成。
created: function () {
      this.$store.dispatch('LOAD_METRICS', this.$store.state.metrics.loaded).then((res) => {
        if (res !== 'loaded') {
          this.updateNumbers(res)
        } else {
          this.socialIcons[0].count = this.kFormatter(this.$store.state.metrics.twitter) + 'K'
          this.socialIcons[1].count = this.kFormatter(this.$store.state.metrics.instagram) + 'K'
          this.socialIcons[2].count = this.kFormatter(this.$store.state.metrics.youtube) + 'K'
          this.socialIcons[3].count = this.kFormatter(this.$store.state.metrics.twitch) + 'K'
        }
      })
    }