2019年2月22日

福岡拠点の宮里です。

vueのコンポーネントからvuexの値の更新を監視して、vuexの値の更新があったときにローカルのデータを更新したい場合どうすればいいの？と調べることがあったので備忘録として記事を書きます。

まずは、vuexの日本語ドキュメントを読みました。
vuexのStoreインスタンスメソッド’watch’が良さそうです。

watch(fn: Function, callback: Function, options?: Object): Function

fnが返す値をリアクティブに監視し、値が変わった時にコールバックを呼びます。fnは最初の引数としてストアのステートを、2番目の引数としてゲッターを受け取ります。 Vue のvm.$watchメソッドと同じオプションをオプションのオブジェクトとして受け付けます。

監視を止める場合は、返された unwatch 関数を呼び出します。

(vuex.vuejs.orgより引用)

うーん、vue.jsに慣れてないので上記の説明を読んでもよくわかりません。
store.watch()で引数に関数を渡して、関数の引数に監視したいstateの値を指定するみたいです。

うーん、もう一声。

‘vuex store.watch’で検索するとそれっぽい参考になりそうなコードがいくつか。
イメージはつかめてきたものの、ただ今回は、複数に分割したストアのモジュールのローカルステートを監視したかったので、mapGettersやmapStateで実際どう書けばいいのと悩むこと数十分。

ありました、ありました！
vue.js開発者の方のブログに「Watch for Vuex State changes!」という記事が！！
探してたのこれこれ！ありがとうございます！と参考にさせていただきましたm(＿＿)m

四苦八苦しつつもなんとかこのかたちに落ち着きました。
this.$store.watch()の第一引数にステート/ゲッター、どちらを渡してもうまくいきそうです。

<script>
  import _ from 'lodash'
  import { mapState, mapGetters, mapActions } from 'vuex'
  export default {
    computed: {
      ...mapActions('artists', [
        'fetchAlbums',
      ]),
      ...mapGetters('artists', [
        'getAlbumList',
      ]),
      ...mapState('artists',
        [
          'artistId',
          'name',
          'genres',
          'albumList',
          'popularity',
        ]
      ),
    },
    methods: {
      this.$store.watch(() => this.albumList,
        (value) => {
          if (!_.isEmpty(value)) {
              console.log(_.map(value, 'when we fall asleep, where do we go?'))
          }
        },
      )
    },
    data () {
      return {
        album: {
          title: '',
          image: '',
          trackList: [],
          releaseDate: ''
        },
      }
    },
    created: function () {
      this.fetchAlbums
    },
    mounted: function () {
      this.watchStore()
    },
  }
</script>

import _ from 'lodash'

import { mapState, mapGetters, mapActions } from 'vuex'

export default {

computed: {

...mapActions('artists', [

'fetchAlbums',

]),

...mapGetters('artists', [

'getAlbumList',

]),

...mapState('artists',

[

'artistId',

'name',

'genres',

'albumList',

'popularity',

]

methods: {

this.$store.watch(() => this.albumList,

(value) => {

if (!_.isEmpty(value)) {

console.log(_.map(value, 'when we fall asleep, where do we go?'))

}

)

data () {

return {

album: {

title: '',

image: '',

trackList: [],

releaseDate: ''

}

created: function () {

this.fetchAlbums

mounted: function () {

this.watchStore()

}

</script>

福岡拠点の香月です。

今回はルートとコントローラーを追加します。

ブラウザでURLリンクをクリックしたときにはそれに対応した画面が表示されますが、Webサーバー内ではそのURLに対して表示するデータをモデルから取得し、そのデータをビューで整形してHTMLとして表示します。このモデルとビューの橋渡し役がコントローラーの役目となります。また、要求されたURLをどのコントローラーで処理させるかを指定したのがルート（ルーティング）です。

では早速ルートから指定していきます。laravelプロジェクトのrouteフォルダにweb.phpがあります。これを開いて次のように編集しましょう。

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//Route::get('/', function() {
//    return view('welcome');
//});
Route::get('/', 'TopController@index')->name('top');

<?php

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

//Route::get('/', function() {

// return view('welcome');

//});

Route::get('/', 'TopController@index')->name('top');

アプリケーションのトップURL（http://server/）が呼び出されたときに、TopControllerクラスのindexメソッドを呼び出すように指定しています。
->name(‘top’)でこのルートに対して名前を付けています。ここでつけた名前は他の場所でURIを指定するときに使うことができます。

次はTopControllerの作成です。シェルで次のコマンドを実行します。

# php artisan make:controller TopController

1	# php artisan make:controller TopController

するとapp/Http/Controllers/TopController.phpにファイルが作成されます。
クラスメソッドとしてindex()を追加してあげましょう。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TopController extends Controller
{
    public function index()
    {
        return view('welcome');
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TopController extends Controller

{

public function index()

{

return view('welcome');

}

route\web.php内で直接指定していたようこそ画面の表示を、コントローラーを介して表示するように変更しただけのものですが、このようにしておくことでビュー（ここではようこそ画面）で表示したいデータをphpプログラムで集めて、計算して、整形して表示することができるようになります。

上のphp artisan make:controllerコマンドではオプションは指定していませんでしたが、–model=[Model]や–resourceオプションを指定することで、リソースコントローラを作成することができます。
こうすることで作成されるコントローラ用ファイルにindex(), create(), store(), show(), edit(), update(), destroy()の名前が付いた空のメソッドが一緒に作成されます。例えばStudentモデル用のリソースコントローラを作成するにはこう書きます。

# php artisan make:controller --model=Student StudentController

1	# php artisan make:controller --model=Student StudentController

また、リソースコントローラを使う場合はroute/web.phpのルート指定を次のようにすることで、URIとアクションが自動的に割り付けられたルーティングが完成します。

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

//Route::get('/', function() {
//    return view('welcome');
//});
Route::get('/', 'TopController@index')->name('top');
Route::resources('students', 'StudentController');

<?php

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

//Route::get('/', function() {

// return view('welcome');

//});

Route::get('/', 'TopController@index')->name('top');

Route::resources('students', 'StudentController');

Route::resource()の1行で次のルーティングが完成します。

動詞	URI	対応メソッド	ルート名
GET	/students	index	students.index
GET	/students/create	create	students.create
POST	/students	store	students.store
GET	/students/{student}	show	students.show
GET	/students/{student}/edit	edit	students.edit
PUT/PATCH	/students/{student}	update	students.update
DELETE	/students/{student}	destroy	students.destory

これはいわゆるRESTful APIとして設定されており、必要なURIが揃っているのでリソース（≒モデル）のCRUD（Create, Read, Update, Delete）管理がはかどるでしょう。

リソースコントローラの考え方は他のWebフレームワークでも同様に使われています。Ruby on Railsでは「rails generate scaffold …」コマンドが使えて同じようなルートを生成してくれますし、CakePHPでもルート指定時にまとめて設定してくれる方法があります。これらからLaravelに来た人にとってはわかりやすいですよね。

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28

日: 2019年2月22日

Vuexの値の更新を監視したい

[Laravel]ルートとコントローラー