처음 Nuxt.js + Vuex + axios

이 기사에 대하여

아래와 같은 모쿠모쿠 모임에서 했습니다.

【초보자・1인 참가 환영】IT프로랩_Laravel / Vue.js 모쿠모쿠회(Web계)#3 - connpass

평소에는 PHP로 백엔드의 코드를 쓰는 경우가 많습니다만, 최근 1년 정도로 급격하게 프런트 엔드 쓸 기회가 늘어나고 있으므로, Vue.js + Vuex (이어서 최근 주목받고 있는 Nuxt도)로 뭐라고 해 보자, 라고 하는, 이른바 해본 계의 기사입니다.

개요

스테디셀러 TODO 목록을 만듭니다.

프런트 엔드에는 Nuxt.js, 백엔드에는 Laravel을 사용합니다.

환경

nuxt 를 넣으면 vue, vuex 외에 개발에 필요한 모듈을 완전히 넣어 주므로, 후술하는 vue init 를 한 후, yarn install .

nuxt-cli: 1.4.0

vue-cli: 2.9.3

Laravel: 5.5.39

axios: 0.18.0

(axios는 @nuxtjs/axios를 넣습니다)

구성

Backend API 서버 (Laravel)를 localhost : 8000에서 시작합니다

Nuxt dev server를 localhost : 3000에서 시작합니다

병아리 만들기

$ vue init nuxt-community/starter-template nuxt-example
$ cd nuxt-example
$ yarn install

개발 서버 시작

$ yarn run dev

정적 파일 생성

$ yarn run generate

백엔드

Laravel/Vue.js 모쿠모쿠 모임이었으므로, Laravel에서 했지만, 뭐든지 괜찮습니다.

GET/api/todos

[
    {
        "id": 1,
        "body": "テスト1",
        "done": true
    },
    {
        "id": 2,
        "body": "テスト2",
        "done": false
    }
]

백엔드는 이것뿐입니다 (나중에 조금 나옵니다).

준비

axios는 Nuxt.js의 모듈로 넣습니다.

$ yarn add @nuxtjs/axios

그런 다음 nuxt.config.js에 axios 설정을 추가합니다.

nuxt.config.js

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
  },

axios 에 건네주는 설정 파라미터는 비어 있습니다만, 아래의 문서에 있는 "Options"섹션에 여러가지 써 있으므로, 적절히 넣어 주세요.

Introduction · Nuxt Axios Module

API의 대상은 환경 변수에서 가져오므로 개발 서버를 시작할 때 다음과 같이 하십시오.

$ API_HOST=localhost API_PORT=8000 yarn run dev

또는

$ API_URL=http://localhost:8000 yarn run dev

ゔ그림x

일부 끝이 접혀 있습니다.

store/todos.js

import axios from 'axios'

export const state = () => ({
  list: []
})

export const mutations = {
  setList (state, list) {
    state.list = list
  }
}

export const actions = {
  async getList ({commit}) {
    const res = await this.$axios.$get('/api/todos')
    commit("setList", res)
  }
}

API에서 가져오는 곳은 비동기 통신이므로 async/await 로 하여 actions 에 기술합니다.

Promise가 resolve 되면(자), commit() 를 호출해, 뮤테이션에 데이터를 건네주어 합니다.

Vue Component

일부 끝이 접혀 있습니다.

TodoList.vue

import { mapActions } from 'vuex'

export default {
  mounted () {
    this.getList()
  },
  methods: {
    ...mapActions({
      getList: 'todos/getList'
    })
  }
}

호출하는 측의 Component 로부터는, mount 되면 데이터의 일람을 취득하는 처리를, Store 의 action 에 위양 하는 것 뿐입니다.

CORS (Cross-Origin Resource Sharing)

개발 서버가 3000번 포트에서 실행되고 8000번 포트에서 실행 중인 API를 호출하므로 CORS(Cross-Origin Resource Sharing) 설정이 필요합니다.

Laravel에 다음 패키지를 추가합니다.

$ composer require barryvdh/laravel-cors
$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

GitHub - barryvdh/laravel-cors: Adds CORS (Cross-Origin Resource Sharing) headers support in your Laravel application

기본적으로 모든 도메인의 액세스를 수락하므로 적절하게 수정하십시오.

config/cors.php

return [
    'supportsCredentials' => false,
    // ↓↓↓↓ これ ↓↓↓↓
    'allowedOrigins' => ['*'],
];

이상으로, 다음과 같은 간지의 TODO 리스트 어플리케이션을 할 수 있습니다.

거절

시간이 부족해서 TODO 추가 API를 할 수 없었지만, 조만간 구현해 본 기사도 갱신할 예정입니다. Nuxt.js, Vuex, axios의 연계는 일단 만들어졌으므로 지금은 이것으로 용서해 주십시오.

완료되면 GitHub에 전체 코드를 푸시하고 URL을 붙입니다.

실수 나 더 좋은 방법이 있습니다.