前提
知り合いにホームページ作成を任されたため、
Nuxt.jsについて学んでみた。
チュートリアルに使用したサイトは主に以下
https://www.boel.co.jp/tips/vol107/
用語
'ゲッター' and 'セッター'
ゲッターは、特定のプロパティの値を取得するメソッド
セッターは特定のプロパティの値を設定するメソッド
'computed'
算出プロパティ。メソッドと対をなしそう。
入力に対して、暫時的に呼び出される関数群
例えば電話番号入力に対するバリデーションなどに使われる。
この点はメソッドとほぼ同じだが、
computedはキャッシングが同時に行われるようで、
変数に変更がなければ、キャッシュが利用される。
また依存関係が明確で、指定した入力フォームでのみ機能するっぽい
methodはすべての入力フォームで機能する事例もあり。
ゲッター、セッターともに利用できる
けど、基本的にはゲッターだけを定義するっぽい。
呼び出し方もちがう。
var vm = new Vue({
el: '#example',
data: {
firstNum:3,
secondNum:4
},
computed: {
// 算出 getter 関数
resultNum: function () {
// `this` は vm インスタンスを指します
return this.firstNum * this.secondNum
}
}
})
を呼び出すのは
<p>{{ resultNum }}</p>
'methods'
メソッド
再描画のたびに呼び出される
セッター及び、他の関数を定義する模様。
methodsプロパティはv-onのハンドラ関数としても利用できる。
var vm = new Vue({
el: '#example',
data: {
firstNum:3,
secondNum:4
},
methods: {
// 算出 getter 関数
calcNum: function () {
// `this` は vm インスタンスを指します
return this.firstNum * this.secondNum
}
}
})
をよびだすのは
<p>{{ calcNum() }}</p>
となる。カッコの有無に気をつけよう。
よく出てくるthis
非常によく出てきて、なおかつ急すぎる
<script>に出てくるやつはdataと同義だと考えたが、
冷静になって考えてみると、JavaScript独特のやつだと気づく。
JSの文法事項をちゃんと学んでなかったことを自覚した
メソッド内
var myObj = {
name: '太郎',
myFunc: function() {
//メソッドの中にthisを記述
console.log( this );
}
}
この場合、thisはmyObjectを指す
コンストラクタ内
function Human( name, age ) {
this.name = name;
this.age = age;
}
var taro = new Human( '太郎', 30 );
console.log( taro );
この場合は、Humanであり、taroを指す。
HTML要素内にある
<body>
<form>
<!— onclick属性にthisを使ってinput要素そのものを参照する -->
<input id="btn1" type="button" value="ボタン１" onclick="getFunc( this.id )" />
<input id="btn2" type="button" value="ボタン２" onclick="getFunc( this.id )" />
</form>
<script>
function getFunc( id ) {
console.log( id );
}
</script>
</body>
このときはthisが要素内を指すため、btn1、btn2を示す。
export default内のthis
これを解決するのが非常に厄介であった。なぜなら、data{}内のプロパティがdefault.data.プロパティだと勘違いしていたからである。
しかし、実際はdataはいわば見出しのようなものなので、default.プロパティと書ける。
よって、
export default {
data: function() {
return {
content:{},
find_state: '',
find_flg: false
}
},
computed: {
...mapState(['todos']),
display_todos: function() {
if(this.find_flg) {
var arr= [];
var data = this.todos;
data.forEach(element => {
if(element.content.toLowerCase() == this.content.toLowerCase()) {
arr.push(element);
}
});
return arr;
} else {
return this.todos;
}
}
}
}
の場合、再三出てくるthisは<template>のHTML要素など関係ない。defaultを指す。
ファイルの役割
pages/index.vue
ほぼ根幹。
<template>で囲んだ部分がレンダー前のHTML
<script>で囲んだ部分がjsで、
import
export default {
data
computed
methods}
等を書き込む
export default 内の変数や関数は、同ファイルのtemplateで使用可能
また、外部ファイルでもimportに記載してexportに放り投げると使用可能
なんて便利な。。。
<style>で囲んだ部分は主にCSS
store/index.js
Vuex.Storeに、コンポーネントを超えて使用したいグローバルなデータを保存する。
平たく言えば、index.vueで呼び出したい何かが入っている（リストや関数など）
const store = createStore({
state: {
count: 1
},
mutations: {
increment (state, n) {
// 状態を変更する
state.count += n
}
}
})
pages/index.jsの<script>内で呼び出し可能。
...mapGetters(['insert']}
...mapActions
...mapState
のように宣言すると使える。他にもいろんな書き方があるようだ
ミューテーション
Storeのstateを唯一書き換えることができるのが、ミューテーション内の関数であるようだ。
以下のように呼び出す。
store.commit('increment', 10)
さらっと通り過ぎたが、ミューテーションの第二以降の引数をペイロードと呼ぶ。
これは、基本的にオブジェクトで渡すべきであるようだ。
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
store.commit('increment', {
amount: 10
})
また、index.vueは以下のようにオブジェクトスタイルで書き得られるようだ
store.commit({
type: 'increment',
amount: 10
})
この場合、オブジェクト全体がペイロードらしい。
まとめ
今回初めてNuxt.jsを触ったが、reactよりも使いやすい気がした。まあreactにはreactの良さがあるのだが、、
次はNuxt.jsでホームページ的なものを書こうと思う。
また、Qiita投稿も初めてである。今まで、記事を書くのは時間の無駄な気がしてためらっていたが、なるほど、知識の整理がかなりはかどる。
加えて、マークダウン記法がかなり便利。さくさくかける。
よって、これからも書いていこうと思う。