そもそも共通状態管理はどういう時に使うの?
・複数の画面で同じ値を使いたい時。
・URLに値載せたくないけど遷移先で値使いたい時。
参考:
https://stackoverflow.com/questions/40774131/hide-query-params-in-address-bar-vuejs
・そのほか使いたいと思う時がある時。
なぜVuexや自作のもので共通状態管理をおこなうの？データから直で値持って来ちゃダメなの？
変えたのがコード上でしかわからないのでこんがらがるなどの理由があります。
値変更時にログ出力しとけば『あ~そこでその値変えたのね！！』とかなってバグ修正がしやすくなる。『あ！ここで共通の値かえてる〜、だからおかしかったんだ！』とかとか。
もっと詳しく説明してくれていると思った参考以下
https://vuex.vuejs.org/ja/
で?? 実際コードどんな感じなの？
ちなみに参考お手本以下URL
https://jp.vuejs.org/v2/guide/state-management.html
大元のところ
main.js
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction(newValue) {
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction() {
if (this.debug) console.log('clearMessageAction triggered')
this.state.message = ''
}
}
new Vue({
data: {
privateState: store.state
// sharedState: store.state
},
methods: {
setMessageAction: function(newValue) {
store.setMessageAction(newValue)
},
clearMessageAction: function() {
store.clearMessageAction()
}
},
render: h => h(App),
}).$mount('#app')
使用方法
console.log(this.$root.$data.privateState.message);
とか
<div>{{this.$root.$data.privateState.message}}</div>
とか
this.$root.setMessageAction('変更したよ！');
とか
コードの説明
main.js
new Vue({
data: {
privateState
のところの
main.js
privateState
が
main.js
this.$root.$data.privateState
で呼べてる。
main.js
new Vue({
data: {
privateState: store.state
// sharedState: store.state
},
methods: {
setMessageAction: function(newValue) {
store.setMessageAction(newValue)
の
main.js
setMessageAction: function(newValue)
のところが
main.js
this.$root.setMessageAction('変更したよ！');
で呼べてる。
さいごにここの説明を
main.js
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
もし、debugをtrueにしていたらログをだします。
自分のもってるmessageを新しい値にかえます。
これはやっちゃだめ
ログ出力しないので、せっかく作ったの意味なくなる
this.$root.$data.privateState.message = '変わりました！';
最後に
間違っている部分などあれば教えていただけると嬉しいです！