vue는 인터페이스에서 얻은 데이터를 vuex에 어떻게 넣나요?

Vue는 개발자가 대화형 및 동적 웹 애플리케이션을 구축하는 데 도움이 되는 인기 있는 JavaScript 프레임워크입니다. Vue는 사용 편의성과 유연성으로 널리 호평을 받고 있습니다. Vue는 또한 Vuex라는 플러그인을 제공하여 애플리케이션의 데이터 상태를 관리하는 데 도움을 줍니다. Vuex는 여러 부분 간의 동기화를 관리하고 보장하기 위해 모든 애플리케이션 상태를 한곳에 중앙 집중화하는 상태 관리 패턴입니다.

Vue를 사용하여 웹 애플리케이션을 개발할 때 일반적으로 뷰를 렌더링하기 위해 서버에서 데이터를 가져와야 합니다. 이 데이터는 HTTP 요청을 통해 API에서 얻은 다음 Vue 구성 요소에서 사용할 수 있습니다. 이 경우 Vuex는 데이터 상태를 중앙 집중화하여 전체 애플리케이션에서 공유할 수 있도록 도와줍니다.

이 글에서는 API에서 얻은 데이터를 Vuex에 넣는 방법을 소개하겠습니다. 다음 단계를 사용합니다:

1. Vuex 저장소 만들기
2. API 데이터를 가져와 Vuex에 저장
3. Vue 구성 요소에 저장된 데이터 사용

Vuex 저장소 만들기

Vuex를 사용하여 데이터를 저장하려면 다음이 필요합니다. store.js 파일입니다. store.js 파일에서 먼저 Vue와 Vuex를 가져와야 합니다. 그런 다음 Vue.use(Vuex)를 사용하여 Vuex 플러그인을 등록해야 합니다.

'vue'에서 Vue 가져오기
'vuex'에서 Vuex 가져오기

Vue.use(Vuex)

store.js 파일에서 공유하려는 상태를 포함하는 Vuex 스토어 인스턴스를 생성합니다.

export const store = new Vuex.Store({
state: {

data: []

},
mutations: {

setData(state, payload) {
  state.data = payload
}

}
})

위 코드에서는 data라는 상태를 정의하고, 메서드를 제공합니다. 데이터 상태에 데이터를 저장하는 데 사용되는 변이에 setData라는 이름이 붙었습니다.

다음으로 Vue 구성 요소에서 사용하려면 Store 인스턴스를 내보내야 합니다.

API 데이터를 가져와 Vuex에 저장합니다.

Vue 구성 요소에서는 axios 또는 기타 HTTP 라이브러리를 사용하여 API에서 데이터를 가져올 수 있습니다. 이번 글에서는 axios를 사용해 데이터를 가져오겠습니다.

데이터를 가져와 Vuex에 저장하려면 Vue 구성 요소에서 작업 메서드를 호출해야 합니다. store.js 파일에서는 데이터를 수신하고 변이에 정의된 setData 메서드를 호출하여 데이터 상태에 저장하는 작업 메서드를 제공합니다.

다음은 store.js 파일의 전체 코드입니다.

'vue'에서 Vue 가져오기
'vuex'에서 Vuex 가져오기
'axios'에서 axios 가져오기

Vue.use(Vuex)

const store 내보내기 = new Vuex.Store({
state: {

data: []

},
mutations: {

setData(state, payload) {
  state.data = payload
}

},
actions: {

getData({commit}) {
  axios.get('https://api.example.com/data')
    .then(response => {
      commit('setData', response.data)
    })
}

}
})

위 코드에서는 getData actions라는 메서드를 정의합니다. 방법. 이 방법은 axios를 사용하여 https://api.example.com/data 주소에서 데이터를 가져옵니다. 획득이 성공하면 commit 메서드를 사용하여 setData mutations 메서드를 호출하여 데이터 상태에 데이터를 저장합니다.

Vue 구성 요소에 저장된 데이터 사용

store.js 파일에 정의된 상태를 Vue 구성 요소에서 사용할 수 있습니다. 다음은 store.js 파일의 데이터 상태에서 데이터를 가져와 템플릿에 표시하는 예제 구성 요소입니다.

<script><br>'vuex'에서 { mapState, mapActions } 가져오기</p><p>기본값 내보내기 {<br> 계산: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapState(['data']),</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br>created() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>this.getData()</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> 메소드: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>...mapActions(['getData']),</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br>}<br></script>

위 코드에서는 Vuex에서 제공하는 mapState 및 mapActions 메소드를 사용합니다. mapState를 사용하여 데이터 상태를 구성 요소의 계산된 속성에 매핑합니다. mapActions를 사용하여 getData 작업 메서드를 구성 요소의 메서드에 매핑합니다.

컴포넌트가 생성되면 생성된 후크 함수를 호출하고 그 안에 있는 getData 메서드를 호출하여 데이터를 store.js 파일의 데이터 상태로 로드합니다. v-for 명령을 통해 얻은 데이터를 반복하고 템플릿에 표시할 수 있습니다.

결론

API에서 얻은 데이터를 Vuex에 저장하는 과정은 위에서 언급한 바와 같습니다. Vuex를 사용하여 애플리케이션 전체에서 데이터를 공유할 수 있도록 애플리케이션 상태를 관리할 수 있습니다. Vue 컴포넌트에서는 mapState 및 mapActions 메소드를 사용하여 Vuex에 저장된 데이터 및 메소드에 액세스할 수 있습니다.

위 내용은 vue는 인터페이스에서 얻은 데이터를 vuex에 어떻게 넣나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!