一旦在 Vuex 商店中可用，值就不会反应

Question

所以我正在使用 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>

最后，我请求 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>

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

Answer 1

这最终通过我将描述为黑客攻击的方式解决了，因为此时我实际上并不知道确切的正确答案。虽然我所拥有的确实有效。

以下兴趣点：

商店

LOAD_METRICS: ({commit}, context) => {
    console.log(context)
    if (context === true) {
      return new Promise((resolve) => {
        resolve('loaded')
      })
    }
    return new Promise((resolve) => {
      Vue.http.get('real ip is normally here').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),
          loaded: false
        }
        commit('SET_METRICS', out)
        resolve(out)
      }).catch((e) => {
        console.log(e)
      })
    })
  }

在上面，我现在在发送调度事件时发送当前 store.state.metrics.loaded 的一个实例。然后检查当前值的真实性，因为第一次加载应该总是 return false 我们然后 return 利用 API 调用的承诺同时也改变商店所以我们有以后的值。因此，因为我们将加载的事件突变为 true，下一个进一步的实例应 return 值为 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.

我相信有更好的方法来考虑行动中的状态逻辑 setter 和 return 做出一个本质上多余的承诺，而不是确保 .then()句柄存在。

一旦在 Vuex 商店中可用，值就不会反应

Values not reactive once available in Vuex Store

javascript

vue.js

vuejs2

vuex