###前提
cordovaの「ファイル操作プラグイン」をvueのプラグインで使用したいと考え、そのプラグインを自作しています。
fileSystem
がdirectoryEntry
に読み込まれた後の処理(非同期)については、単一コンポーネント内(vueファイル)で実行したいと考えています。
現在、以下の様にfileSystem
の読み込みが完了したことを、vueコンポーネントファイルのウォッチャでを監視しています。
js
1// plugin.js 2import Vue from 'vue' 3 4const file = { 5 install: function (Vue) { 6 let vm = new Vue({ 7 data: { 8 directoryEntry: null 9 } 10 }) 11 // ファイルシステム初期化 12 function initFileSystem() { 13 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, setDirecrotyEntry) 14 } 15 16 function setDirecrotyEntry(fileSystem) { 17 store.directoryEntry = fileSystem.root 18 } 19 20 // ファイルシステムの読み込み 21 document.addEventListener('deviceready', initFileSystem, false) 22 Vue.prototype.$file = vm.$data 23 } 24} 25 26Vue.use(file)
vue
1// xxx.vue 2<script> 3 export default { 4 watch: { 5 '$file.directoryEntry': function() { 6 alert('successfull') 7 } 8 } 9 } 10</script>
###実現したいこと
他のアプリにプラグインを使いまわすため、上記の様な非同期の処理をプラグイン内で完結させ、その完了を待って各コンポーネントで処理を実行させたいと思っています。そのような方法があれば教えていただけないでしょうか?
###試したこと
プラグイン内のVueインスタンスにウォッチャーを設定できますが、それを各vueコンポーネントで取得する方法がわかりませんでした。
Vuexのストアを使用する手順も考えましたが、やはりファイルが別れてしまい、他のアプリに流用するときに煩雑になってしまうことを懸念しています。
js
1// plugin.js 2const file = { 3 install: function (Vue) { 4 let vm = new Vue({ 5 data: { 6 directoryEntry: null 7 }, 8 watch: { 9 'this.directoryEntry': function() { 10 alert('successfull') 11 } 12 } 13 }) 14 } 15} 16 17Vue.use(file)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。