未在挂载中设置 Vuex 存储值答案

【问题标题】：Vuex store value not set in mounted未在挂载中设置 Vuex 存储值
【发布时间】：2020-10-13 22:02:24
【问题描述】：

我遇到了从商店中获取空值的问题...有时，并且仅在某些值上。如果有人能指出我正确的方向并解释为什么它是错误的......我将非常感激。所以这是我的store.getters.getApiKey 有时是"" 有时不是。所以……在下面的组件vue中，第一次引用时不为null

{{this.$store.getters.getApiKey}}

然后在已安装的部分中，设置了store.getters.getHostUrl，但store.getters.getApiKey 不断返回""。

以下是详细信息：
组件.vue

<template>
  <div class="countryCodes">
    <p>ApiKey :  {{this.$store.getters.getApiKey}}</p>
    <p>CountryCode Data is {{ page }}</p>
    <div class="CountryCodes">
      <tr v-for="ccdata in content_list" v-bind:key="ccdata.guid">
        <td>{{ ccdata.guid }}</td>
        <td>{{ ccdata.name }}</td>
        <td>{{ ccdata.code }}</td>
      </tr>
    </div>
  </div>
</template>

import axios from "axios";
import store from "@/store";

export default {
  name: 'CountryCodes',
  data () {
    return {
      page: "",
      content_list: []
    }
  },
  mounted () {
   axios({ method: "GET", "url": store.getters.getHostUrl + " 
"/api/"+store.getters.getApiKey+"/countryCodes" }).then(result => {
      this.page = result.data.page;
      this.content_list = result.data.contents;
    }, error => {
      console.error(error);
    });
  },
  methods: {
  }
}
</script>

然后我的商店（store.js）看起来像这样......

import Vuex from "vuex";
import Vue from 'vue';

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        apiKey: "",
        hostUrl:""
    },
    mutations: {
        SET_APIKEY(state, value) { state.apiKey = value;   },
        SET_HOST_URL(state, value) {state.hostUrl = value; }
    },
    getters: {
        getApiKey(state) {  return state.apiKey; },
        getHostUrl(state) {  return state.hostUrl; }
    }
})

最后在我的 main.js 中，我将数据提交到存储区...：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store.js'

new Vue({
  el: '#app',
  render: h => h(App),
  router,
  store,
  mounted: function() {
    console.log(this.$route.query)
    store.commit('SET_APIKEY',  this.$route.query.api)
    store.commit("SET_HOST_URL", location.origin.toString())
  }
})

我在尝试构建 http 服务时遇到了同样的问题，其中 apikey 的 store 为空。我错过了什么魔法？

【问题讨论】：

让我添加一个细节。我认为这是一个时间问题。数据显示在我进入应用程序的第一条路线上。如果我导航到不同的路线，然后返回，这些值将被正确设置。也许我需要添加一块手表？
我在beforeCreate()初始化我的商店

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

通常子组件的mounted钩子在父组件的mounted之前调用。

来自Vue Parent and Child lifecycle hooks

如果您尝试在两个mounted 挂钩上使用console.log，您将看到执行顺序（但我仍然不确定为什么设置了您的store.getters.getHostUrl）。

所以你需要一个观察者在你的商店有价值之后运行你的代码。

示例代码：

...
  computed: { // or use another getters
    url () {
      if (!store.getters.getHostUrl || !store.getters.getApiKey) return
      return `${store.getters.getHostUrl}/api/${store.getters.getApiKey}/countryCodes`
    }
  },
  watch: {
    url (value) {
      ...
    }
  }
...

CodeSandbox

【讨论】：

谢谢！我确实看到了另一个详细说明组件状态的状态图……但我没有在组件到组件的流程中看到这个。非常有帮助...我确实放了一块手表并且效果很好...我也在研究何时看到这些值处于哪些状态！正如您所指的文章所说“这些钩子将触发的不直观的顺序”！！！！

【解决方案2】：

所以....有两种方法可以解决这个问题......感谢两位 cmets。

将我在 main.js 中的挂载切换为已创建 - 上图解释了原因......以及不错的文章。
添加“等待 store.getters.getApiKey”

【讨论】：