Vuex 및 컴포넌트 고유의 데이터를 사용한 Vue 구조화

Vuex 및 컴포넌트 고유의 데이터를 사용한 Vue 구조화

다음과 같은 구조를 사용하는 Vue.js 프로젝트가 많이 있습니다.

├── main.js
├── api
│   └── index.js
│   └── services           #containing files with api-calls
│       ├── global.js
│       ├── cart.js
│       └── messages.js
├── components
│   ├── Home.vue
│   ├── Cart.vue
│   ├── Messages.vue
│   └── ...
└── store
    ├── store.js
    ├── actions.js  #actions to update vuex stores
    ├── types.js
    └── modules
        ├── global.js
        ├── cart.js
        └── ...

(이 구조의 예로는 'Jackblog'가 있습니다.)

예를 예를 들면요.Cart.vue.inCartx))(Vuex로 하다위해 는 「」를 Import .actions.js:

import { inCart } from '../../store/actions'

actions.jsapi import index.jsAPI를 사용합니다.부엑스

그, 、 그내 、 그게내분 。제가 싶어요.Messages.vueVuex에 .이 모듈은 api에도 접속하여 모든 메시지를 얻어야 하지만 결과를 Vuex에 저장할 필요는 없습니다.의 vue에.data()disclossible.

질문:Import할 수 없다actions.js에 inside inside inside Messages.vueVuex v v v 、 Vuex v 、 Vuex 。데데 the the the the 를 움직일 수가 요.actions.jsapidirectory의 스토어에 데이터를 하는 로직이입니다.는 안쪽에 .Messages.vue했을 때 api는 api를 반환한다error어울리다.따라서 별도의 파일로 처리할 수 없습니다.

로컬 API에 입니까?data() 파일, 파일actions 일 、 api 파 、 ? 、 ? 、 ? 、 ? 、 ? ? 、 ? ? 、 ? 、 ? 、 ? 、 ? 、 ? 、 ? 、 잭블로그 부엑스양쪽을 지원하도록 재구축하려면 어떻게 해야 할까요?

API 호출을 위해 HTTP 클라이언트로 악시오스를 사용하고 있습니다.gateways의 내 my에 폴더src폴더와 나는 각 백엔드에 대한 파일을 가지고 있으며, 다음과 같은 악리 인스턴스를 만듭니다.

myApi.js

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000/api/v1',
  timeout: 5000,
  headers: {
    'X-Auth-Token': 'f2b6637ddf355a476918940289c0be016a4fe99e3b69c83d',
    'Content-Type': 'application/json'
  }
})

이러한 동일한 인스턴스는 구성 요소와 vuex 작업 모두에서 데이터를 가져오는 데 사용됩니다. 다음은 두 가지 방법에 대한 세부 정보입니다.

구성 요소 데이터 채우기

, 를 들어 과 같습니다.Messages.vueapi 에 、 에 、 에 、 에 、 에 , 、 에 ,음음음 , , , 。

export default {
  name: 'myComponent',
  data: () => ({
    contents: '',
    product: []
  }),
  props: ['abc'],
  methods: {
    getProducts (prodId) {
       myApi.get('products?id=' + prodId).then(response => this.product = response.data)
       },
       error => {
          console.log('Inside error, fetching products failed')
          //set error variable here
       })
    }
    ..... 

Vuex 데이터 입력

전용 vuex 모듈에서 제품 관련 데이터를 유지하는 경우 컴포넌트의 메서드에서 액션을 디스패치할 수 있습니다.이 메서드는 내부적으로 백엔드 API를 호출하여 스토어에 데이터를 채웁니다.코드는 다음과 같습니다.

컴포넌트의 코드:

methods: {
 getProducts (prodId) {
     this.$store.dispatch('FETCH_PRODUCTS', prodId)
  }
}

vuex 스토어의 코드:

import myApi from '../../gateways/my-api'
const state = {
  products: []
}

const actions = {
  FETCH_PRODUCTS: (state, prodId) => {
    myApi.get('products?id=' + prodId).then(response => state.commit('SET_PRODUCTS', response))
  }
} 

// mutations
const mutations = {
  SET_PRODUCTS: (state, data) => {
    state.products = Object.assign({}, response.data)
  }
}

const getters = {
}

export default {
  state,
  mutations,
  actions,
  getters
}

간단한 답변: Jackblog의 예를 참고하여 컴포넌트에서 "api"를 Import하고 API를 직접 사용하면 됩니다.액션을 Import 하지 말아 주세요.메시지에서.가게 일은 잊어버려스토어에 연결된 작업 계층은 필요하지 않습니다.API만 있으면 됩니다.

---

긴 답변: 프로젝트에는 다음과 같은 내용이 있습니다.

1. Ajax 라이브러리 래퍼로, 문자열과 객체라는 두 개의 매개 변수를 사용할 수 있습니다.이 문자열은 달성하려는 목표(예: "saveProductComment")를 나타내며 개체는 페이로드(서버로 전송되는 매개 변수의 이름 및 값)입니다.

2. 각 앱 모듈에는 위의 "string"을 루트 구성과 매핑하는 "routes.js" 파일이 포함될 수 있습니다.예를 들어 다음과 같습니다.saveProductComment: 'POST api/v1/products/{product_id}/comment'

주의: '앱 모듈'이라는 용어는 사용하지 않습니다..js또는.vue노드에 의해 '모듈'로 취급되는 파일JS 또는 웹 팩.특정 도메인과 관련된 앱 코드를 포함하는 풀 폴더인 "앱 모듈"을 호출합니다(예: "카트" 모듈, "계정" 모듈, "댓글" 모듈 등).

3. 어디서든 전화할 수 있습니다.remote('saveProductComment', { product_id: 108, comment: 'Interesting!' }), 그리고 그것은 a를 반환한다.Promise래퍼에서는 루트 설정을 사용하여 적절한 요구를 작성하고 응답을 해석하여 오류를 처리합니다.어떤 경우에도remote a를 합니다.Promise.

4. 각 앱 모듈은 또한 자체 스토어 모듈을 제공할 수 있으며, 여기서 모듈과 관련된 초기 상태, 돌연변이, 동작 및 게터를 정의합니다.상태 관리 코드에는 "Manager"라는 용어를 사용하고 있습니다.예를 들어 "commentsManager.js" 파일을 사용하여 "comments"를 처리할 수 있습니다.

5. 매니저를 합니다.remoteVuex 액션 내에서 API 콜을 발신하는 함수입니다.리모트에서 Promise를 반환하지만 결과를 처리하는 콜백도 연결합니다.콜백에서는 변환 함수를 호출하여 결과를 커밋합니다.

---

newProductComment ({ commit }, { product, contents }) {
    return remote('saveProductComment', {
        product_id: product.id,
        comment: contents
    })
    .then(result => {
        commit('SOME_MUTATION', result.someProperty)
    })
}

---

이제 Vuex 컨텍스트 외부에서 직접 컴포넌트 내에서 동일한 API 호출을 사용하려면 Vue 컴포넌트 메서드에서 유사한 코드를 사용해야 합니다.예를 들어 다음과 같습니다.

export default {
    name: 'myComponent',
    data: () => ({
        contents: '',
        someData: null
    }),
    props: ['product'],
    methods: {
        saveComment () {
            remote('saveProductComment', {
                product_id: this.product.id,
                comment: this.contents
            })
            .then(result => {
                this.someData = result.someProperty
            })
        }
    }
}

---

앱 구조에 있어서 우리에게 정말로 중요한 것은 다음과 같습니다.

• 어플리케이션을 명확한 관심사로 적절히 분류하는 것, 이른바 '앱 모듈'; 특정 사항마다 하나의 모듈

• 각 "앱 모듈"에 대한 폴더를 포함하는 "접속" 폴더가 있습니다.

• 특정 "앱 모듈 폴더" 내에 루트가 설정되어 있습니다.routes.js리모트 기능의 첫 번째 파라미터를 루트 설정에 매핑합니다.커스텀 코드는 HTTP 메서드를 선택하고 URL을 보간하며 필요에 따라 모든 종류의 화려한 작업을 수행합니다.단, 앱 코드의 나머지 부분에서는 다음과 같이 간단한 방법으로 사용합니다.remote('stuffNeededToBeAccomplished', { dataToAccomplishTheNeed })

• 즉, 매핑과 Ajax 라이브러리 래퍼(실제 요청에 Ajax 라이브러리를 사용할 수 있음)에 많은 작업이 있습니다.이는 Vue/Vuex 사용과는 완전히 독립적입니다.

• Vuex 스토어도 모듈로 나누어져 있습니다.일반적으로 앱 모듈에서는 거기에 정의된 경로를 사용하여 대응하는 스토어 모듈이 있습니다.

• 메인 엔트리 포인트에서는 어플리케이션모듈을 Import합니다.각 모듈의 index.js는 Ajax 래퍼 내의 루트와 Vuex 내의 스토어 모듈을 모두 등록합니다(따라서 Ajax 및 Vuex에서 사용할 수 있는 스토어 모듈을 Import하기 위해서는 추가 액션을 수행하지 않아도 됩니다).

언급URL : https://stackoverflow.com/questions/40829200/vue-structuring-with-vuex-and-component-specific-data