はじめに
基本的に Vue は子要素の代入演算子は感知しません。
しかし、Array は公式が公表している、ラップした変更検知メソッドを利用して、操作をすればやりたい事はほぼ全て実現できるでしょう。
しかし、Array は公式が公表している、ラップした変更検知メソッドを利用して、操作をすればやりたい事はほぼ全て実現できるでしょう。
これらはAirbnb lint ruleから得られた経験から来た知見です。結構使いやすい。
; セミコロンを末尾に付けたくない人も多いと思いますが、そこはruleを上書きすればまぁ良いでしょう。push や pop 程度など、まぁ知ってるでしょうていう軽いのは省いています。ゴール
コンポーネントとストアの記法の統一
配列辺
規定回数繰り返す
よく見るairbnb lintで怒られるコード
for (let i=0;i<5;i++) {
print(i)
}
改善。これはとても見やすいですね。
[...Array(5)].forEach((_, i) => { console.log(i) })
ちなみにこれは動きません。
Array(5).forEach((_, i) => { console.log(i) })
配列の特定インデックスの値を書き換える
リアクティブにならなくて辛いやつ
a = [{a:1},{b:2}]
a[1].b = 10
リアクティブで嬉しいやつ。
a = [{a:1},{b:2}]
a = a.splice(1, 1, {b:10})
軽く解説
spliceはまず開始indexを指定して、そこから何個取り除くのかを指定し、最後に指定した箇所に挿入する要素を渡せます。これはリアクティブでとても嬉しい。
あと、何個取り除くかの個数を0にすれば、単純に要素の挿入になり、とても良い感じです。
また、第３引数を入れなければ、普通に要素削除にもなります。
途中の要素挿入、追加、削除は
あと、何個取り除くかの個数を0にすれば、単純に要素の挿入になり、とても良い感じです。
また、第３引数を入れなければ、普通に要素削除にもなります。
途中の要素挿入、追加、削除は
spliceとりあえず使えばとても統一感が出そうな気がしますね。computedやgetterの際のみ、特定要素を追加したい
data() {
return {
a: [
{ name: '田中', age: 18 },
{ name: '小林', age: 18 },
],
}
},
これはとても悲しい例ですね。getterで副作用を発生させている。
store の getter でも this.a ならず、state.a バージョンを見たことあります。computed: {
personList() {
this.a.forEach(item => {
item.isMinority = item.age < 20
})
return this.a
},
},
改善。map最高！
computed: {
personList() {
return this.a.map(item => ({ ...item, isMinority: item.age < 20 }))
},
},
foreach
まぁ、よくみるやつ
const a = [1,2,3]
for (const i in a) {
console.log(i, a[i])
}
for (const i of a) {
console.log(i)
}
lintで叱られないし、配列っぽくてこっちのが良い気がする
const a = [1,2,3]
a.forEach((value, i) => {
console.log(i, value)
})
a.forEach(value => {
console.log(value)
})
break foreach
皆さんこういうのやりたいですよね
const a = [44,99,55,33]
for (i of a) {
if (i === 55) break
console.log(i)
}
これでどうでしょか。some最高！
const a = [44,99,55,33]
a.some(i => {
if (i === 55) return true
console.log(i)
})
配列から特定の値を検索して、それの値を変えたい
よくみるやつ。リアクティブにならなくてとてもかなしい。
Vue.set使えばいけるけど、storeだと使えないので、記法を統一したいですよね。const a = [44,99,55,33]
for (i in a) {
if (a[i] === 55) {
a[i] = 4649
break
}
}
これはどうでしょうか。
const a = [44,99,55,33]
const key = a.findIndex(i => i === 55)
if (key !== -1) {
a.splice(key, 1, 4649)
}
オブジェクト辺
プロパティを上書き・追加する
リアクティブじゃなくてとても悲しいやつ
let a = {
name: '田中',
age: 18,
}
a.age = 20
これはリアクティブでとても嬉しい
let a = {
name: '田中',
age: 18,
}
a = { ...a, age: 20 }
プロパティを削除する
リアクティブじゃなくて悲しいやつ
let a = {
name: '田中',
type: 'スーパーマン',
age: 18,
}
delete(a.age)
リアクティブで嬉しいやつ。
let a = {
name: '田中',
type: 'スーパーマン',
age: 18,
}
let clone = { ...a }
delete(clone.age)
a = clone
最後に
如何だったでしょうか？
統一された良いコードを頑張って作っていきましょう！
統一された良いコードを頑張って作っていきましょう！
