vue.js에 인터페이스 데이터를 저장하기 위해 vuex를 호출하는 방법
- 亚连원래의
- 2018-06-20 17:15:483124검색
이 글에서는 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 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
},
actions:{
},
mutations:{
}
})그리고 나서 main.js 이 js 파일
import store from './store.js'
을 도입한 다음 데이터 요청을 시작합니다. mutations 속성에
mutations:{
getJson(){
Vue.http.get('../data.json',{
},{
headers:{},
emulateJSON:true
}).then(response=>{
this.state.newslist=response.data;
},response=>{
})
}
}를 작성합니다. 이는 작업이 상태에서 데이터를 조정하고 저장할 수 있도록 하기 위해 작성되었습니다. 데이터 저장 비동기는 ajax의 비동기 로딩과 동일하다는 것을 이해합니다. 물론 동기화는 돌연변이를 의미합니다. 하지만 비동기 데이터는 먼저 변이로 작성된 다음 호출할 수 있으므로 액션
actions:{
newJson(obj){
obj.commit('getJson');
}
},에서 이렇게 작성해야 하며 그 다음 상태는 다음과 같이 작성됩니다.
state:{
newslist:[]
},이 글을 작성하는 목적은 오류 보고를 방지하고 실수를 피하십시오.
위의 newJson과 obj는 원하는 대로 작성할 수 있습니다. getJson은 나중에 사용할 매개변수이지만 매개변수는 상태여야 합니다. . 이 상태는 사용자 정의되지 않은 위의 상태입니다. 죽을 때까지 쓰세요.
다음으로 하위 구성 요소에서 흐름을 분할할 수 있습니다!
하위 구성 요소의 코드는 다음과 같습니다.
import {mapState} from 'vuex';
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="{'current':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>위 내용은 제가 모든 사람을 위해 작성한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
nodejs에서 mssql 모듈을 기반으로 캡슐화를 구현하는 방법
위 내용은 vue.js에 인터페이스 데이터를 저장하기 위해 vuex를 호출하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!