Vuex 스토어에서 매개 변수를 사용하여 시작할 때 구성 요소에서 데이터 가져오기

Vuex 스토어에서 매개 변수를 사용하여 시작할 때 구성 요소에서 데이터 가져오기

저는 Vue가 처음이고 API에서 데이터를 가져와서 결과를 렌더링하는 간단한 동영상 앱을 구축하려고 합니다.증분 검색 기능을 사용하고 싶습니다.내 탐색 모음에 입력 필드가 있으며 사용자가 입력할 때 대시보드 보기에서 검색 결과 보기로 리디렉션하려고 합니다.탐색 모음에서 검색 결과 보기로 쿼리 매개 변수를 전달하는 방법을 잘 모르겠습니다.

여기 제 앱이 있습니다.값 성분

<template>
  <div id="app">
    <Navbar></Navbar>
    <router-view/>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
export default {
  name: 'App',
  components: {
    Navbar
  },
}
</script>

여기 입력 필드가 있는 내 navbar 구성 요소가 있습니다.

<template>
  <nav class="navbar">
    <h1 class="logo" v-on:click="goToHome">Movie App</h1>
    <input class="search-input" v-on:keyup="showResults" v-model="query" type="text" placeholder="Search..."/>
  </nav>
</template>

<script>
import router from '../router/index'
export default {
  data: function () {
    return {
      query: this.query
    }
  },
  methods: {
    goToHome () {
      router.push({name: 'Dashboard'})
    },
    showResults () {
      //here on each key press I want to narrow my results in the SearchedMovies component
    }
  }
}
</script>

사용할 경우router.push에게SearchedMovies그러면 쿼리를 매개 변수로 한 번만 전달할 수 있습니다.Vuex를 사용하여 쿼리를 저장한 다음 SearchedMovies 구성 요소에서 쿼리에 액세스하는 것을 고려했지만, 확실히 더 나은 방법이 있습니까?

사용에 대해서도 읽었습니다.$emit하지만 부모님이 모든 경로를 포함하고 있기 때문에 어떻게 해야 할지 모르겠습니다.

사용자를 다른 곳으로 리디렉션할 필요가 없습니다.저는 사람들이 그것을 어떻게 하는지 보여주기 위해 작은 데모를 만들었습니다.나는 당신이 설명한 대로 이 navbar 구성 요소를 사용하여 이벤트를 발생시킵니다.

const movies = {
  data: [
    {
      id: 0,
      title: 'Eraserhead',
    },
    {
      id: 1,
      title: 'Erazerhead',
    },
    {
      id: 2,
      title: 'Videodrome',
    },
    {
      id: 3,
      title: 'Videobrome',
    },
    {
      id: 4,
      title: 'Cube',
    },
  ]
};

Vue.component('navbar', {
  template: '<input v-model="filter" @input="onInput" placeholder="search">',
  data() {
    return {
      filter: '',
    };
  },
  methods: {
    onInput() {
      this.$emit('filter', this.filter);
    }
  }
});

// this is just a request imitation. 
// just waiting for a second until we get a response
// from the datasample
function request(title) {
  return new Promise((fulfill) => {
    toReturn = movies.data.filter(movie => movie.title.toLowerCase().indexOf(title.toLowerCase()) !== -1)
    setTimeout(() => fulfill(toReturn), 1000);
  });
}


new Vue({
  el: '#app',
  data: {
    movies: undefined,
    loading: false,
    filter: '',
    lastValue: '',
  },
  methods: {
    filterList(payload) {
      // a timeout to prevent 
      // instant request on every input interaction
      this.lastValue = payload;
      setTimeout(() => this.makeRequest(), 1000);
    },
    makeRequest() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      request(this.lastValue).then((response) => {
        this.movies = response;
        this.loading = false;
      });
    }
  },
  mounted() {
    this.makeRequest('');
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <navbar v-on:filter="filterList"></navbar>
  <ul v-if="!loading">
    <li v-for="movie in movies" :key="movie.id">{{ movie.title }}</li>
  </ul>
  <p v-else>Loading...</p>
</div>

jsfiddle: https://jsfiddle.net/oniondomes/rsyys3rp/

위의 코드를 이해하는데 문제가 있다면 알려주세요.

편집: 몇 가지 버그를 수정하고 몇 가지 의견을 추가했습니다.

EDIT2(아래 설명 뒤):

당신이 할 수 있는 일은 다음과 같습니다.사용자가 navbar 안에 무언가를 입력할 때마다 함수라고 합니다.

// template
<navbar v-on:input-inside-nav-bar="atInputInsideNavBar"></navbar>

// script
methods: {
    atInputInsideNavBar(userInput) {
        this.$router.push({
            path: '/filtred-items',
            params: {
                value: userInput
            }
        })
    }
}

그런 다음 '동영상 검색' 페이지 구성 요소에서 이 값에 액세스할 수 있습니다.

this.$route.params.value // returns userInput from root component

언급URL : https://stackoverflow.com/questions/48732499/fetch-data-in-component-on-initiation-using-parameters-from-vuex-store