Vue.js+OnsenUIのnavigatorの扱うページで値を共有したい

Question

前提・実現したいこと

Vueを学習しており、現在はMonacaでアプリの画面遷移について勉強中です。
v-ons-navigatorで管理されたコンポーネント間で共有できる変数を用意したいと考えています。

コンポーネントは
・App.vue　（v-ons-navigator所持）
・Page1.vue （最初に表示されるページ）
・Page2.vue　（途中でpush、popされるページ）
の三つです。

App.vueに作ったtodos配列を、push時に子に渡し、
子からは、emitで値を親に渡して、親のコンポーネントで配列の追加を行っております。

下記は、そのソースコードとなっております。
page1、page2それぞれ配列を追加できる形になっておりますが、
描画の更新が行われません。またこのほかに方法があればご教授願いたいです。

ソースコード　（試したこと①の内容）

//App.vue

<template>
  <v-ons-navigator
    :page-stack="pageStack"
    @push-page="pushPage"
    @pop-page="popPage"
    @add-todo="addTodo"
  ></v-ons-navigator>
</template>

<script>
import page1 from './Page1'
import page2 from './Page2'

export default {
  data() {
    return {
      pageStack: [],
      todos: [
        {
          text: 'todo one',
        },
        {
          text: 'todo two',
        },
        {
          text: 'todo three',
        }
      ]
    }
  },
  methods: {
    pushPage(page) {
      this.pageStack.push({
        extends: page,
        data : ()=> {
          return {
            todos: this.todos
          }
        }
      })
    },
    popPage() {
      this.pageStack.pop();
    },
    addTodo(val) {
      this.todos.push({text: val})
    }
  },
  created: function(){
    this.pushPage(page1);
  }
}
</script>

// Page1.vue

<template>
  <v-ons-page>
    <custom-toolbar>Page 1</custom-toolbar>
    <v-ons-list-item v-for="(todo) in todos">
      <label>
        {{ todo.text }}
      </label>
    </v-ons-list-item>

    <ons-button @click="nextPage">
      Page2に遷移する
    </ons-button>
    <ons-button @click="change">
      todoを追加する
    </ons-button>
  </v-ons-page>
</template>

<script>
import page2 from './Page2'
export default {
  methods: {
    nextPage() {
      this.$emit('push-page', page2)
    },
    change() {
      this.$emit('add-todo', 'page1の値です')
    }
  },
  props: ['pageStack']
}
</script>

//Page2.vue

<template>
  <v-ons-page>
    <custom-toolbar>Page 2</custom-toolbar>
    <ons-button @click="pop">
      Page1に戻る
    </ons-button>
    <ons-button @click="change">
      todoを追加する
    </ons-button>
  </v-ons-page>
</template>

<script>
export default {
  methods: {
    pop() {
      this.$emit('pop-page')
    },
    change() {
      this.$emit('add-todo', 'page2の値です')
    }
  },
  props: ['pageStack']
}
</script>

試したこと

①pushの第二引数でextendを使用し、data型で直接渡す方法を試しました。
結果：参照で渡せないことと、親に返すだけではPage1とPage2の同期がとれないことが問題となりました。
追記：子の間でも値を共有していることはconsole.logにて確認できましたが、再描画のみが行われていない状態でした。

②vueの解説でよくあるpropsで行うやりかたも、ons-navigatorが絡むと形がイメージできず、
取り入れることができませんでした。
追記：ons-navigatorでpropsは利用できないとのことでした。代わりのextends。

③Vue.prototype.$hoge　というグローバルに近いものも試しましたが、思ったように値変更ができないようで断念しました。

補足情報

vue　: 2.5.16
vue-onsenui　: 2.6.1
onsenui　: 2.10.3

Answer 1

状態管理方法について

1. 単なるオブジェクトへのアクセス
2. storeパターン
3. Vuex

私の知る限りVueでの状態管理方法は上記3つ存在します。

3つの特徴を理解して好きなもの（適切なもの）を選べば良いかと思います。

小さなアプリケーションであれば1か2で問題ありません。
大規模アプリケーションの場合は3をおすすめします。

1. 単なるオブジェクトへのアクセス

以下プログラムの通りです。
一番シンプルですが、オブジェクトの値を直接変更できてしまう為デバッグが困難になる場合があります。

余談ですが、私は個人的なアプリケーションを時間をかけずに開発する場合この方法を利用しています。

公式サイトより引用

this.$root.$data を通じてアクセスすることもできます。
ただ1つの情報源を持つことにはなりましたが、このままだとデバッグは悪夢になるでしょう。
どんなデータでも、アプリケーションのどこからでも痕跡を残すことなく変えることができてしまいます。

** ファイル構成例 **

** app.js **

const app = new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>',
  data () {
    return {
      hoge: 'hello world'
    }
  }
})

app.$mount('#app')

** Index.vue **

export default {
  data () {
    return {
    }
  },
  async mounted () {
    console.log(this.$root.hoge)
  }
}

参考
https://jp.vuejs.org/v2/guide/state-management.html#%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%82%92%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8B

2. storeパターン

1の弱点を補う為に考えられたパターンです。
オブジェクトへ直接アクセスを行わず、メソッドを経由して値を書き換えるという考え方です。
メソッドを経由するためデバッグをログを吐かせればデバッグが簡単になります。

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 = ''
  }
}

参考
https://jp.vuejs.org/v2/guide/state-management.html#%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AA%E7%8A%B6%E6%85%8B%E7%AE%A1%E7%90%86%E3%82%92%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8B

3. Vuex

規模が大きくなることが見込まれている場合はVuexを使うべきです。
Vuexを使うと適切な管理ができます。

しかし、小さなアプリケーション開発の場合は非常に冗長だと感じるはずです。

公式サイトより引用

Vuex は、共有状態の管理に役立ちますが、さらに概念やボイラープレートのコストがかかります。これは、短期的生産性と長期的生産性のトレードオフです。
もし、あなたが大規模な SPA を構築することなく、Vuex を導入した場合、冗長で恐ろしいと感じるかもしれません。
そう感じることは全く普通です。あなたのアプリがシンプルであれば、Vuex なしで問題ないでしょう。単純な ストアパターン が必要なだけかもしれません。

参考
https://vuex.vuejs.org/ja/

Comments

[tyama_jp]

回答ありがとうございます。
全ての状態管理方法を出していただき大変参考になっております。
現在はVuexにて、③を使っているものと思いましたが、形だけで見ると非常に②と似ており、
それ以上でも以下でもないので、実際はVuexの機能を全く引き出せていないようです。

また、わたしが今作っているアプリに関しては、そこまで大規模になる予定はないので、
aglkjggg様の教えていただいた、①と同じ方法でアプリを再構築しました。
非常に管理しやすく重宝しております。デバッグが困難らしいですが、またその際に、
VuexやStoreでの管理方法への移行を検討したいとおもいます。

為になる情報助かりました。ありがとうございます。

Answer 2

VueのコアライブラリのVuex使うのも手です
https://vuex.vuejs.org/ja/

monacaなのでターミナルで
npm install --save vuex
でインストールして

main.js

import Vue from 'vue';
import VueOnsen from 'vue-onsenui';
import Vuex from 'vuex';

import 'onsenui';
// Onsen UI Styling and Icons
require('onsenui/css-components-src/src/onsen-css-components.css');
require('onsenui/css/onsenui.css');

import App from './App';

Vue.use(VueOnsen);
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'aaaa', done: true },
      { id: 2, text: 'bbbb', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    addTodos (state, data) {
      state.todos.push(data)
      console.log(state.todos)
    }
  },
  actions: {
    addTodos (context, data) {
      context.commit('addTodos', data)
    }
  }
})

new Vue({
  el: '#app',
  template: '<app></app>',
  components:{App},
  store
});

App.vue

<template>
  <v-ons-navigator
    :page-stack="pageStack"
    @push-page="pushPage"
    @pop-page="popPage"
  ></v-ons-navigator>
</template>

<script>
import page1 from './Page1'

export default {
  data() {
    return {
      pageStack: [],
    }
  },
  methods: {
    pushPage(page) {
      this.pageStack.push(page)
    },
    popPage() {
      this.pageStack.pop();
    }
  },
  created: function(){
    this.pushPage(page1);
  }
}
</script>

Page1.vue

<template>
  <v-ons-page>
    <custom-toolbar>Page 1</custom-toolbar>
    <ons-button @click="nextPage">
      Page2に遷移する
    </ons-button>
    <div>
      <div v-for="data in todos">
        {{ data.text }}
      </div>
    </div>
  </v-ons-page>
</template>

<script>
import { mapState } from 'vuex'
import page2 from './Page2'
export default {
  methods: {
    nextPage() {
      this.$emit('push-page', page2)
    },
  },
  computed: mapState({
    todos: state => state.todos,
  }),
  props: ['pageStack']
}
</script>

Page2.vue

<template>
  <v-ons-page>
    <custom-toolbar>Page 2</custom-toolbar>
    <ons-button @click="pop">
      Page1に戻る
    </ons-button>
  </v-ons-page>
</template>

<script>
import page2 from './Page2'
export default {
  data() {
    return {
    }
  },
  methods: {
    pop() {
      this.$store.dispatch('addTodos', { id: 3, text: 'cccc', done: true })
      this.$emit('pop-page')
    },
  },
  props: ['pageStack']
}
</script>

Comments

[tyama_jp]

回答ありがとうございます。
質問の本文編集とタイミングが被ってしまいすみません。
vuexについては触れたことがなかったので、少し調べてみます。

[tyama_jp]

vuexの解説を読むと私が期待していた内容がそこにありました。
頂いたコードをひとつひとつ実行させていただきましたが、無事動作を確認できました。
ありがとうございます。vuexの機能を最大限に引きだすにはまだまだ勉強が必要ですが、
今後の展開としてもvuexは貴重な知識となりました。

また、現在本文に記載している不具合として、頂いたソースコードから気付きがありました。
その点については、本文で記述させていただきます。ありがとうございました。

Answer 3

◆◆◆◆◆
◆方法①：push時の参照渡し方法
再描画がされない件については、
対象の値が<v-ons-page>直下に書いてあることが原因?だった。

<div>
  <v-ons-list-item v-for="(todo) in todos">
    <label>
      {{ todo.text }}
    </label>
  </v-ons-list-item>
</div>

このように<div>で囲むことで無事に更新を確認できた。
rururu3様の、コードを自分で書いてある途中、値が更新されない件に気付き、
そのまま流用した際に、再描画されたことから発見につながった。
詳細についてはまた詳しくリファレンスを読んでいきたいと思います。

◆◆◆◆◆
◆方法②：vuexでの管理
rururu3様のコードを参照

Answer 4

###専門外言語ですが

アルゴリズムの話だと思うので、参加できるかと思っています。

###私の考え

まず、vueを親オブジェクトになっているので、ページ間の内容をかんりする親オブジェクトを作成し、
vueをその親オブジェクトから子オブジェクトとして呼び出し、
ページ出力の際に管理しているデータをページ内に含めるように大改造する。

ページ間移動を管理する親オブジェクトは常に子オブジェクトの帰り値を保持するようにコーディングする。

子オブジェクトが値を返さなかったらページ間移動をキャンセルする。

こんな考え方で実装可能になるのではないでしょうか？

Comments

[tyama_jp]

回答ありがとうございます。
>ページ間の内容をかんりする親オブジェクト
おそらくこれは現在App.vueがその役割を担っています。

ons-navigatorの作りでは、ページを都度pushして移動しておらず、
Page1の上にPage2が乗っかる形なので、pushの度に値を渡すという実装に代えられません。

>子オブジェクトが値を返さなかったらページ間移動をキャンセルする。
Page2をpopし、親に値を渡しても、すでにPage1は表示されているので、
Page1に値を渡し直す方法がわからない次第となっております。

on,emitなどを使って対象コンポーネントを指定する方法を無理やりとれなくはないかと
少しは考えたのですが、実装としてあまりに遠回りな処理なのではと少し感じております。

理解が浅く、phpsyoshinsya様の方法で実装できるのやもしれませんが、
私の実力では現在そこに至りません。回答ありがとうございました！

[phpsyoshinsya]

なるほどです。ただ、もしこれでやればというのがあるなら、遠回りでも実装に成功するか試してみるのは必要ではないでしょうか。

私もコードを見てみましたが、帰り値が戻ってきていたとしても、それを管理していそうなコードが見当たりません。
親オブジェクトとなる新しいオブジェクトがVUEの帰り値をチェックしなければ、今後アプリが大きくなってくれば、どこかの条件で結果セットがプッシュされないということも起こりえるのではないかと。もちろん、単なる練習であればそこまでかんが見る必要はないでしょうが、そういう意識を持っでコーディングに望まれる方が特にコンパイル言語では大切なのではないかと。また、一つ確認を忘れていましたが、なぜページ移動でVUEの帰り値を共有したいと思われたのかが明治されていませんでしたね。私の見落としならすみませんが。

[tyama_jp]

たしかに、、おっしゃる通りです。
冗長なコードを実装するより先に、効率的な実装法を求めて逆に遠回りになっていたようです。

＞私もコードを見てみましたが、帰り値が戻ってきていたとしても、それを管理していそうなコードが見当たりません。
回答の妨げになってしまうかと思い、私が試行錯誤したコードは省いていました。
本来は親のappVueに値を渡す関数を用意していました。
本日近しい実装を行い次第、コードを改めてあげさせていただきます。

＞なぜページ移動でVUEの帰り値を共有したいと思われたのかが明治されていません
本文中になぜ実装したいかを追記しました。

親身に考えてくださり、ありがとうございます。

[phpsyoshinsya]

何かしらヒントになれば、いいのかとは思いますが。

ただ、新たなコードが提示されるとのこと、楽しみにしています。

環境が許すなら、ゆっくり頑張ってください。

[phpsyoshinsya]

なるほどです。いま質問内容を再度確認しなおしました。ページ2で作成したToDoリストが戻ってこないということですね。

それなら、根本的にコードが足りませんね。

書き方として、ページ1から2に移動する際、
VUEの子オブジェクトであるページ1を開放しないとページが重なる結果となり、もしこのままで実装に成功してもメモリを圧迫するアプリとなってしまう恐れについて考慮したことはありますでしょうか？

VUEと最後にプッシュしたページは親子関係にありますが、
今のならページ１を親オブジェクトとし、
ページ2を子オブジェクトとし、
VUEを読み込み必須のクラスに設定
するのがもっともスマートではないかと。

いかがでしょうか？

[tyama_jp]

>メモリを圧迫するアプリとなってしまう恐れについて考慮したことはありますでしょうか？
OnsenUIのNavigatorを使っているのでその恐れはありません。
Page1の複数回pushは行っていないので、詳しくは下記を確認してください。
https://qiita.com/coboco/items/5c33e201907623de5270
https://ja.onsen.io/v1/reference/ons-navigator.html

>今のならページ１を親オブジェクトとし、
OnsenUIのNavigatorでのアニメーションが今回の実装の大前提となりますので、
その方法は選択できない形となります。

[phpsyoshinsya]

そういう大前提があるのですね。
私もQiitaさんのサイト読んでみます。

[phpsyoshinsya]

私はQiitaさんのご紹介いただいたページから答えを既に導き出しました。

まずは質問者さんのコード再提示をお待ちしています。

[tyama_jp]

ありがとうございます。
ソースコードの編集と、問題点の簡略化を行いました。