はじめに
現在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連携まで挑戦してみたいと思います。
コメントを残す