updated: 2019/12/11
vue@2.6.10
vuex@3.1.2
以下要検証
vuexのstateを取得するときdataで取得することができるが
data() {
return {
target: this.$store.state.target
}
}
取得したstateのプロパティにアクセスするときに取得前の値(null?)を参照してしまいエラーが出る場合がある。
例えば、
mounted() {
target.methodA() // error
}
computedでstateを取得すると回避できる。
computed: {
target() {
return this.$store.state.target
}
},
mounted() {
target.methodA() // success
}
プロパティがダイナミックに定義されるものである場合、レンダリング時にcomputedは適切に評価されず、初めてプロパティが取得できた時点でストップしてしまう？？？
例えば、
const state = {
target = {}
}
mutaions = {
'UPDATE_TARGET' (state, data) {
state.target[data.key1] = data.value
state.target[data.key2] = data.secondValue
}
}
mutationでtargetのpropの中身を2回更新
computedで正しく2回更新された後のtargetを取得できているのにレンダリングは1回目の更新しか反映されていない。
DOMをいったんdestroyした後、再度アクセスするとcomputedで2回更新後のtargetを取得できる。（stateで2回更新後の値が定義済みなのでそれを取得している？？？）
妥協案
dynamicに定義予定のキーをあらかじめ定義しておく
⇒つまりdynamicはやめてstaticにあらかじめ定義
const state = {
target = {someProp: [ ], otherProp: [ ]}
}
mutaions = {
'UPDATE_TARGET' (state, data) {
state.target[data.key] = data.value // [data.key] = "someProp"
state.target[data.key2] = data.secondValue // [data.key2] = "otherProp"
state.target[data.key][data.someDynamicProp] = data.thirdValue // will cause rendering error
/* 左辺は必ずstaticに */
}
}
computed: {
success() {
return this.$store.state.target.someProp // success
}
}
参考：
