Vue + Vuex 프로젝트 구조화

Vue + Vuex 프로젝트 구조화

나는 내 글로벌 기능을 어디에 두어야 할지 혼란스럽다.많은 예에서 main.js 파일은 앱 구성요소를 가리키고 이것은 html의 어딘가에 배치된다.만약 내가 이 앱 구성 요소 안에 내 모든 논리를 포함한다면 이 작업흐름은 나에게 좋을 것이다.하지만 나는 라라벨 기능과 부품을 결합하고 있어. 그래서 나한테는 안 돼.

현재 내 main.js 파일에는 앱의 어디서든 액세스해야 하는 여러 가지 방법이 들어 있다.이러한 방법에는 방송 이벤트가 포함되어 있지 않으므로 vue-resource 인스턴스를 얻는 한 어디에나 효과적으로 배치할 수 있다.

내 main.js 파일:

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

만약 내가 vuex를 사용한다면, 또는 일반적으로 이것이 전혀 최선의 방법처럼 보이지 않기 때문에 누군가가 나에게 내 우정 방법을 어디에 둘 수 있는지 말해 줄 수 있기를 바란다.

감사합니다.

Vuex는 애플리케이션의 모든 데이터를 관리하며,그것은 당신의 프런트 엔드 데이터에 대한 "단일적인 진실 출처"이다.따라서 친구를 추가하거나 친구를 거부하는 등 애플리케이션의 상태를 변화시키는 어떤 것이든 Vuex를 통해 흘러갈 필요가 있다.이것은 세 가지 주요 기능 유형인 게터, 작용, 돌연변이를 통해 일어난다.

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

게이터는 Vuex의 스토리지에서 데이터를 가져오는 데 사용된다.Vuex 데이터가 변경되면 구성 요소의 정보도 업데이트된다는 의미인 변경에 반응한다.이런 거 넣어도 돼.getters.js필요한 모듈로 가져올 수 있도록.

작용은 당신이 직접 부르는 기능이다. acceptFriendRequest사용자가 버튼을 클릭할 때데이터베이스와 상호 작용한 다음 돌연변이를 전송한다.이 앱에서 모든 작업이actions.js.

그래서 네가 전화했겠지this.acceptFriendRequest(recipient)당신의 구성 요소 안에.이것은 당신의 데이터베이스에 친구 상태를 업데이트하라고 말하고, 당신은 이 일이 일어났다는 확인을 받을 것이다.그때 당신은 Vuex 내에서 현재 사용자의 친구 목록을 업데이트하는 돌연변이를 파견할 때 입니다.

돌연변이는 새로운 상태를 반영하기 위해 Vuex의 데이터를 업데이트한다.이 경우 getter에서 검색하는 모든 데이터도 업데이트된다.전체 흐름의 예는 다음과 같다.

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;
  }
}

그래서 이 모든 것들은 그들 자신의 파일로 정리되어 있으며, 당신이 필요한 어떤 구성요소로든 가져올 수 있다.전화할 수 있다.this.addFriend(friend)어떤 하는 것은 Getter이다.this.friends돌연변이가 발생하면 새로운 친구와 자동으로 업데이트될 것이다.앱의 모든 보기에서 동일한 데이터를 항상 사용할 수 있으며 데이터베이스가 최신 상태임을 알 수 있다.

몇 가지 잘못된 점:

• 수령자가 자동으로 수령state 그래서 당신의 할 수 있다.
• 돌연변이는 비동기적이 되어서는 안 된다.작업에서 가져오기/업데이트를 수행한 다음 데이터 업데이트만 위해 돌연변이 전송
• 다음을 사용하여 서비스(또는 리소스) 생성Vue Resource자원을 더 쉽게 획득/수집/배출할 수 있을 것이다.당신은 이것들을 별도의 파일에 넣고 당신의 것으로 가져올 수 있다.actions.js데이터베이스 검색 논리를 분리하는 것.그럼 이런 글을 쓰고 있을 텐데.FriendService.get({id: 1})대신에Vue.http.get('/users/1')https://github.com/vuejs/vue-resource/blob/master/docs/resource.md을 참조하십시오.
• Vuex는 "시간 여행"을 위해 Vue devtools와 함께 작업한다.발생한 모든 돌연변이의 목록을 볼 수 있고 그것들을 되감기/다시 할 수 있다.디버깅과 데이터 변경 위치를 확인하는 데 매우 유용하다.

참조URL: https://stackoverflow.com/questions/38072302/structuring-a-vue-vuex-project