はじめに
現在Laravel+Vue.jsでのアプリ制作の記録です。
※前回までの記録。
【Laravel+Vue.js】アプリ制作の記録②プロジェクト作成
【Laravel+Vue.js】アプリ制作の記録③Vue Routerの実装
Vuexの実装
※参考までに過去記事※
VuexのインストールとVuexを使う前準備
①インストール
npm install --save-dev vuex
※–save-devはローカルインストール。npm i -gで-gを付けるとグローバルインストール。デフォルトはローカル。
※npm install –save-devはnpm i -Dと省略できる。
Laravelアプリ環境下ではpackage.jsonが以下のように自動で変更される。
"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を見ると入力データの登録が確認できる。

おわりに
前回に引き続き、見た目は全然できていませんが、とりあえず仕組みの把握をしてみました。
次回はついにDB連携まで挑戦してみたいと思います。
コメントを残す