【Laravel+Vue.js】アプリ制作の記録④Vuexの実装

"devDependencies": {
    "axios": "^0.19",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.13",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vue-template-compiler": "^2.6.11",
    "vuex": "^3.1.3" // 自動で追記
},

②コンポーネントの作成

resources/js/components/Board.vueを作成

<template>
  <div>
    <header>
      <h1>My Note</h1>
      <p>No tasks</p>
    </header>
  </div>
</template>
<script>
export default {
}
</script>

export defaultを記述することで他のコンポーネントからimportして使用可能になります。

③ルートコンポーネントで呼び出し

App.vueを編集

<template>
  <div>
    <Board />
    <main>
      <div class="container">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<script>
import Board from './components/Board.vue'
export default {
  components: {
    Board
  }
}
</script>

④Example.vueは不要なので削除

⑤app.jsの編集

import Vue from 'vue'
import router from './router'
import App from './App.vue'

const app = new Vue({
  el: '#app',
  router,
  components: {
    App,
  },
})

⑥views/layouts/app.blade.phpの編集

<div id="app">
- <p><example /></p>
  <App />
</div>

http://127.0.0.1:8000/へアクセス。

⑦コンポーネントの作成

resources/js/components/ListAdd.vueを作成

<template>
  <form class="addlist" @submit.prevent="addList">
    <input v-model="title"
           type="text"
           class="text-input"
           placeholder="Add new list"
    >
    <button type="submit" class="add-button">
      Add
    </button>
  </form>
</template>

<script>
export default {
  data: function() {
    return {
      title: '',
    }
  },
  methods: {
    addList: function() {
      this.$store.dispatch('addlist', { title: this.title })
      this.title = ''
    },
  }
}
</script>

⑧Board.vueの編集

ListAdd.vueの読み込み

<template>
  <div>
    <header>
      <h1>My Note</h1>
      <p>No tasks</p>
    </header>
    <list-add />
  </div>
</template>

<script>
import ListAdd from './ListAdd.vue'
export default {
  components: {
    ListAdd
  },
}
</script>

http://127.0.0.1:8000/へアクセス。

Vuexの実装

①js/store/index.jsの作成&編集

index.jsを編集

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  getters: {
  }
})

②app.jsでVuexの読み込み

import Vue from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'

const app = new Vue({
  el: '#app',
  router,
  store,
  components: {
    App,
  },
})

③LocalStorageを使ってみる(仮実装)

index.jsを編集

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const savedLists = localStorage.getItem('trello-lists')
const store = new Vuex.Store({
  state: {
    lists: savedLists ? JSON.parse(savedLists): [
      {
        title: 'Backlog',
        cards: [
          { body: 'English' },
          { body: 'Mathematics' },
        ]
      },
      {
        title: 'Todo',
        cards: [
          { body: 'Science' }
        ]
      },
      {
        title: 'Doing',
        cards: []
      }
    ],
  },
  mutations: {
    addlist(state, payload) {
      state.lists.push({ title: payload.title, cards:[] })
    },
  },
  actions: {
    addlist(context, payload) {
      context.commit('addlist', payload)
    },
  },
  getters: {
  }
})

store.subscribe((mutation, state) => {
  localStorage.setItem('trello-lists', JSON.stringify(state.lists))
})

export default store

http://127.0.0.1:8000/へアクセス。

インプット内にテキストを入力してAddをクリック。

Googleコンソール⇒Applicationタグ⇒Local Storageを見ると入力データの登録が確認できる。