Vue + Vuex 프로젝트 구조화

Question

저는 글로벌 기능을 배치 할 위치에 대해 혼란스러워합니다. 많은 예제에서 main.js 파일은 앱 구성 요소를 가리키며 이것은 html 내의 어딘가에 위치합니다. 이 워크 플로는이 앱 구성 요소 내에 모든 논리를 포함하기 만하면됩니다. 하지만 Laravel 기능과 구성 요소를 결합하여이 기능이 작동하지 않습니다.

현재 내 main.js 파일에는 내 앱의 어느 곳에서나 액세스해야하는 여러 가지 메소드가 포함되어 있습니다. 이러한 메소드에는 브로드 캐스트 이벤트가 포함되지 않으므로 vue-resource 인스턴스를 얻는 한 어디서나 효과적으로 배치 할 수 있습니다.

내 main.js 파일 :

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

내 우정 방법을 배치 할 수있는 곳 나는이 모든 가장 좋은 방법은 아닌 것 같아 이후 vuex 또는 일반적으로를 사용한다면 희망 누군가가 말해 줄 수 .

감사합니다.

Answer 1

Vuex는 응용 프로그램의 모든 데이터를 관리합니다. 프런트 엔드 데이터의 "단일 진실"입니다. 따라서 친구를 추가하거나 친구를 거부하는 등 응용 프로그램의 상태를 변경하는 모든 것이 Vuex를 통해 진행되어야합니다. 이것은 세 가지 주요 함수 유형 인 getter, actions 및 mutations을 통해 발생합니다.

체크 아웃 : https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

게터는 Vuex 스토리지에서 데이터를 가져 오는 데 사용됩니다. 그것들은 변경에 반응합니다. 즉, Vuex 데이터가 변경되면 구성 요소의 정보도 업데이트됩니다. 이들을 getters.js과 같이 넣으면 원하는 모듈에서 가져올 수 있습니다.

동작은 직접 호출하는 기능입니다. 사용자가 버튼을 클릭하면 acceptFriendRequest이 표시됩니다. 이들은 데이터베이스와 상호 작용 한 다음 돌연변이를 파견합니다. 이 응용 프로그램에서 모든 작업은 actions.js에 있습니다.

구성 요소에 this.acceptFriendRequest(recipient)이라고 부릅니다. 이렇게하면 데이터베이스가 친구 상태를 업데이트 할 것입니다. 그런 다음 다시 확인 메시지가 나타납니다. Vuex 내에서 현재 사용자의 친구 목록을 업데이트하는 돌연변이를 파견 할 때입니다.

돌연변이는 새 상태를 반영하기 위해 Vuex의 데이터를 업데이트합니다. 이 경우 게터에서 검색하는 모든 데이터도 업데이트됩니다.

import {addFriend} from './actions.js'; 
import {friends} from './getters.js'; 
new Vue({ 
    vuex:{ 
    getters:{ 
     friends 
    } 
    }, 
    methods:{ 
    addFriend 
    } 
} 

store.js :

export default { 
    state:{ 
    friends: [] 
    }, 
    mutations:{ 
    ADD_FRIEND(state, friend) { 
     state.friends.push(friend); 
    } 
    } 
} 

actions.js :

export default { 
    addFriend(friend){ 
    Vue.http.post('/users/1/friends',friend) 
     .then((response)=>{ 
     dispatch("ADD_FRIEND", response) //response is the new friend 
     }) 
    } 
} 

getters.js

export default { 
    friends(state) { 
    return state.friends; 
    } 
} 

그래서 모두 여기에 전체 흐름의 예는 이 중 일부는 자체 파일로 구성되어 있으며 imp 당신이 필요로하는 모든 구성 요소로 그들을 ort. 모든 구성 요소에서 this.addFriend(friend)으로 전화하면 this.friends에서 액세스하는 게터가 변이가 발생할 때 새 친구와 자동으로 업데이트됩니다. 앱의 모든보기에서 언제나 동일한 데이터를 사용할 수 있으며 데이터베이스에 최신 데이터임을 알 수 있습니다.

일부 기타 물건 : 당신은 항상 당신의 Vuex 저장소의 상태를

돌연변이가 비동기 않을 것입니다 참조 할 수 있도록

• 게터는 자동 변수로 state을받을 수 있습니다. 작업을 가져 오거나 업데이트 한 다음 데이터를 업데이트하기 위해 돌연변환을 전달하는 것
• Vue Resource을 사용하여 서비스 (또는 리소스)를 생성하면 리소스를 반입/업데이트/삭제하는 것이 훨씬 쉬워집니다. 이를 별도의 파일에 넣고 actions.js에 가져 와서 데이터베이스 검색 논리를 분리 된 상태로 유지할 수 있습니다. 그렇다면 Vue.http.get('/users/1') 대신 FriendService.get({id: 1})과 같은 것을 쓸 것입니다. https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• Vuex는 "시간 이동"을 위해 vue devtools에서 작동합니다. 발생한 모든 돌연변이의 목록을보고 다시 감을 수 있습니다. 디버깅 및 데이터 변경 위치를 확인하는 데 적합합니다.