Блог

У меня были проблемы, когда я получал нулевое значение из своего хранилища … иногда и только для некоторых значений. Если бы кто-нибудь мог указать мне правильное направление и объяснить, почему это неправильно… Я был бы очень благодарен. Итак, вот в чем дело, у меня store.getters.getApiKey иногда "" бывает, а иногда и нет. Итак … в приведенном ниже компоненте vue оно не равно null для первой ссылки

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

а затем в смонтированном разделе store.getters.getHostUrl устанавливается, но store.getters.getApiKey продолжает возвращаться "" .

Вот подробности:
Component.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. Какую магию я упускаю?

Обычно mounted перехват дочернего компонента вызывается перед mounted родительским компонентом.

Из родительских и дочерних перехватов жизненного цикла Vue

Если вы попытаетесь console.log использовать оба mounted хука, вы увидите порядок выполнения (но я все еще не уверен, почему ваш 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

Итак …. было два способа решить эту проблему ….. спасибо за оба комментария.

1. Переключите мой смонтированный в main.js для создания — приведенная выше диаграмма объясняет, почему … а также хорошая статья.

2. добавьте «ожидание хранилища.getters.getApiKey»