vue.js에 인터페이스 데이터를 저장하기 위해 vuex를 호출하는 방법-JS 튜토리얼-php.cn

vue.js에 인터페이스 데이터를 저장하기 위해 vuex를 호출하는 방법

亚连

풀어 주다： 2018-06-20 17:15:48

원래의

3235명이 탐색했습니다.

이 글에서는 vue.js에서의 vuex 스토리지 인터페이스 데이터 및 호출 소개에 대한 관련 정보를 주로 소개합니다. 이 글에서는 모든 사람의 공부나 업무에 필요한 특정 참고 학습 가치를 가지고 있습니다. 편집자를 따라가서 함께 배워보세요.

머리말

얼마 전 MOOC에서 황이선생님의 고모방 Ele.me 앱 영상을 보고 인터페이스 디자인을 하다가 이 인터페이스를 글로벌하게 저장하고 호출할 수 있는지 궁금했습니다. 옷감? 인터페이스를 여러번 거치는 대신 관리하는 것도 번거롭습니다.

Universal Vue에는 Vuex라는 기능이 있습니다.

Vuex는 중대형 단일 페이지 애플리케이션에 주로 사용되는 Flux와 유사한 데이터 관리 아키텍처입니다. 이는 주로 코드를 더 잘 구성하고 애플리케이션 내 상태를 유지 관리 및 이해 가능한 상태로 유지하는 데 도움이 됩니다.

Vue.js 애플리케이션의 상태가 무엇을 의미하는지 잘 이해하지 못한다면 이전에 작성한 Vue 구성 요소의 데이터 필드를 상상할 수 있습니다. Vuex는 상태를 컴포넌트 내부 상태와 애플리케이션 수준 상태로 나눕니다.

컴포넌트 내부 상태: 하나의 컴포넌트(데이터 필드) 내에서만 사용되는 상태
애플리케이션 수준 상태: 여러 컴포넌트가 공유하는 상태

예: 두 개의 하위 구성 요소가 있는 상위 구성 요소가 있다고 가정해 보겠습니다. 이 상위 구성 요소는 소품을 사용하여 하위 구성 요소에 데이터를 전달할 수 있습니다. 이 데이터 채널은 이해하기 쉽습니다.

구체적인 구현 과정은 물론 먼저

npm install vuex --save（推荐使用淘宝镜像cnpm，具体实施请自行百度）

로그인 후 복사

를 설치한 다음 store.js 파일을 생성하여 데이터를 관리하는

내부 내용은 이렇습니다

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;
Vue.use(Vuex)
export default new Vuex.Store({
 state:{
 },
 actions:{
 },
 mutations:{
 }
})

로그인 후 복사

그리고 나서 main.js 이 js 파일

import store from &#39;./store.js&#39;

로그인 후 복사

을 도입한 다음 데이터 요청을 시작합니다. mutations 속성에

mutations:{
  getJson(){
   Vue.http.get(&#39;../data.json&#39;,{
    },{
    headers:{},
    emulateJSON:true
    }).then(response=>{
    this.state.newslist=response.data;
    },response=>{
     
    })
  }
 }

로그인 후 복사

를 작성합니다. 이는 작업이 상태에서 데이터를 조정하고 저장할 수 있도록 하기 위해 작성되었습니다. 데이터 저장 비동기는 ajax의 비동기 로딩과 동일하다는 것을 이해합니다. 물론 동기화는 돌연변이를 의미합니다. 하지만 비동기 데이터는 먼저 변이로 작성된 다음 호출할 수 있으므로 액션

actions:{
  newJson(obj){
   obj.commit(&#39;getJson&#39;);
  }
 },

로그인 후 복사

에서 이렇게 작성해야 하며 그 다음 상태는 다음과 같이 작성됩니다.

state:{
  newslist:[]
 },

로그인 후 복사

이 글을 작성하는 목적은 오류 보고를 방지하고 실수를 피하십시오.

위의 newJson과 obj는 원하는 대로 작성할 수 있습니다. getJson은 나중에 사용할 매개변수이지만 매개변수는 상태여야 합니다. . 이 상태는 사용자 정의되지 않은 위의 상태입니다. 죽을 때까지 쓰세요.

다음으로 하위 구성 요소에서 흐름을 분할할 수 있습니다!

하위 구성 요소의 코드는 다음과 같습니다.

import {mapState} from &#39;vuex&#39;;
computed:{
 ...mapState({
  goods:state=>state.newslist.goods,
  classMap:state=>state.classMap
 })
 }

로그인 후 복사

여기서 state.newslist.goods를 대체하도록 상품을 사용자 정의했습니다. 데이터가

{
"goods":[]
}

로그인 후 복사

형식이기 때문에 너무 길다고 생각했습니다. 클릭해 보세요.

그런 다음 HTML에서 직접 호출할 수 있습니다. 여기에 작은 코드 조각이 있습니다.

<ul>
 <li v-for="(item,index) in goods" class="menu-item" :class="{&#39;current&#39;:currentIndex===index}" @click="selectMenu(index,$event)">
 <span class="text border-1px">
 <span class="icon" v-show="item.type>0">
 </span>
 {{item.name}}
  </span>
  </li>
</ul>

로그인 후 복사

위 내용은 제가 모든 사람을 위해 작성한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.