То, что я хочу, чтобы сбылось

Я хочу отобразить предупреждающее сообщение с учетом результата данных, отправленных на сервер. Однако, поскольку предупреждающие сообщения управляются другим компонентом, необходимо вызывать компонент асинхронно. Официальный Vue.js используется документация Vue.component , но как правильно это сделать с помощью Nuxt.js?

Код

Я хочу использовать search.vue в success.vue

поиск.vue

 <template>
  <v-app>
    <div
      class="teal lighten-1 background pa-10"
    >
      <!-- <div
        v-if="responseBook === 200"
        > -->
      <alert-success />
      <v-sheet
        width="1100px"
        class="mx-auto pa-5 rounded-xl"
        color="grey lighten-5"
        min-height="500px"
      >
        <!-- 書籍検索、表示 -->
        <BookPostDialog />

        <!-- 選択されたデータの表示 -->
        <BookPostSelected />
      </v-sheet>
    </div>
  </v-app>
</template>

<script>
export default {
  computed: {
    responseBook () {
      return this.$store.state.book.responseBook.status
    }
  }
}
</script>

<style lang="scss" scoped>
  .background {
    background-image: url('~/assets/images/tree.png');
    background-repeat: space repeat;
  }
</style>

 

Предупреждение/успех.vue

 <template>
  <v-alert type="success">
    Succeeded
  </v-alert>
</template>
 

Если вы хотите использовать такую функцию, вам больше подойдет поиск чего-то вроде этого компонента: https://buefy.org/documentation/toast
Или что-нибудь подобное в джунглях CSS-фреймворков, почти уверен, что у каждого из них есть один.

Или реализуйте его самостоятельно, для этого вам нужно полагаться на порталы.
Для Vue2 это то, как этого добиться: https://portal-vue.linusb.org/guide/getting-started.html#enabling-disabling-the-portal

 <portal to="destination" :disabled="true">
  <p>
    Your content
  </p>
</portal>
 

Если вы хотите показать компонент success.vue после подключения к серверу (получения или публикации данных), вы можете использовать v-if следующим образом:

поиск.vue

 <template>
    <div>
        <p>search compo</p>
        <div v-if="this.$store.state.book.responseBook == 'ok'">
            data was received.
            <success />
        </div>
    </div>
</template>

<script>
export default {
    
    mounted() {
        this.$store.dispatch('getData')
    }

}
</script> 

успех.vue

 <template>
    <div>
        succeess compo
    </div>
</template> 

А затем в вашем store/index.js файл:

 import Vuex from "vuex";

const createStore = () => {
    return new Vuex.Store({

state: {
            book: {
                responseBook: ""
            }
        },
        
mutations: {

            bookMutate(state, data) {
                state.book.responseBook = data;
            }
        },
actions: {       
getData(vuexContext) {
                let vue = this;
                // your request is here
                setTimeout(function() {

                    vue.$axios.$get("https://pokeapi.co/api/v2/pokemon/ditto").then((result) => {
                        console.log(result);
                        vuexContext.commit("bookMutate", "ok");
                    }).catch(err => {
                        console.log(err);
                    })

                }, 10000)

            },
}
        
        });
};

export default createStore; 

Я намеренно использовал setTimeout() в своем действии, чтобы убедиться, что компонент успеха загружен после получения данных. в реальной ситуации лучше использовать это действие:

 getData(vuexContext) {
                               this.$axios.$get("https://pokeapi.co/api/v2/pokemon/ditto").then((result) => {
                    console.log(result);
                    vuexContext.commit("bookMutate", "ok");
                }).catch(err => {
                    console.log(err);
                })

 }, 

Я использовал axios для вызова api, но вы можете использовать свой собственный метод получения данных. но после этого вы должны совершить мутацию, чтобы изменить состояние.