mpvue問題要約(継続更新)
5608 ワード
先に列挙してゆっくり記入する
フック関数は実行されません
フック関数は実行されません
前後の通信テストをすると、フック関数が実行されないという奇妙な問題に遭遇しました.
私も具体的になぜか分かりませんが、可能性のある原因は、物を削除した後、distが直接再コンパイルされないからだと思います.
distフォルダを削除して再コンパイル問題を解決しました
Vuex使用
juejin.im/post/5c2043… Setting data field "$root.0.registered" to undefined is invalid.
私はこのようなセグメントを使ってstorageを読み取るので、undefinedが値を付与できないと判断しなければなりません.
またstateの付与はコールバックではできませんが、閉パケットでdataを取り出す必要があります.initStates(states) {
for (var key in states) {
var data
mpvue.getStorage({
key,
success(res) {
data = res.data
}
})
if (data) {
states[key] = data
}
}
},
EventBus
イベントバスは通信に使用しないことをお勧めします.mpvueの核心的な優位性はvuexに適していることです.通信用vuexは小さなプロジェクトであっても、vuexの使用コスト自体が低いことです.
では、イベントバスはどのような状況で使用する必要がありますか?
需要シーン
私はログインロジックが最初のページでレンダリングされるときだけ、ログインが必要な場合はすべてログインをチェックすることを望んでいません.
構想
イベントバスとしてvueインスタンスを使用して、loginRequiredイベントをリスニングし、ログインロジックを実行します.ここでのログインロジックは、ウィジェットのインタフェースが非同期であるため、非同期関数です.
トリガ・イベントのインスタンスは後続の論理をブロックし、loginStateのステータスを継続的にリスニングしてログインが完了したかどうかを判断する.
イベントバスはグローバルな使用方法のパッケージとして使用でき、Vuexと組み合わせて非同期の機能をうまく実行できることがわかります.
インプリメンテーション
ここでは単独で持ち出すことを実現します.mpvueのメカニズムはVueとは違いますから.
次はログインロジックの使用を実現するeventbusです.import Vue from 'vue'
import { login } from './utils/index' //
var bus = new Vue({
methods: {
login: async function () {
var state = this.$store.state
if (state.global.loginState <= 0) {
this.$store.commit('changeLoginState', 1)
await login.call(this)
} else {
return
}
},
}
})
bus.$on('loginRequired', () => {
console.log('on event loginRequired');
this.a.login()
})
export default bus
詳細を述べる
$onはmountedには書けません
ここでは、mpvueの各ページが独立したvueインスタンスである重要なポイントについて説明します.
私はmpvueのソースコードを見ていません.どうせこのmountedは実行されません.テストしてみました.APP.vueのmountedも実行しない.
ドキュメントにはこれに対する言い方に気づいていません.もし私が目が見えないなら、指摘してください.
推測すると、mpvueはruntimeを変更したので、new Vue()のときにinitの一連の方法を実行し、ウィジェットを開くとすべてのページのcreatedフックが実行され、beforMountedとmountedフックがonReadyの後に実行され、必ずページにアクセスしてからmountedが実行されるという文章があります.
これはインスタンスを指しません
methodを呼び出すときに使用されるのはthis.a.login()であることに気づいた.これはmpvueのプリコンパイルによるもので、具体的にはプリコンパイル後のmainを見ることができます.js.
computedは使用できません
この問題はまだ解決していないので、私はまず計算する内容を直接v-ifの中に入れました.問題を知っている鉄汁たちは言葉を残した.
Dataにはいくつかのフラグ変数があり、複数のフラグに基づいて内容が表示されるかどうかを計算し、キーのソースコードを直接出す必要があります....
"cu-btn bg-green lg"
v-if="idAvailable && !checking && confirming"
@click="setContact"
>
"cu-btn bg-green lg"
v-if="idAvailable && !checking && !confirming"
>
...
computed {
confirmed: () => this.idAvailable && !this.checking && !this.confirming
}
data () {
return {
from_id: undefined,
idAvailable: false,
checking: true, //
confirming: true, //
}
},
...
計算属性を書いた後にエラーを報告します.しかも2回です.Setting data field "$root.0.confirmed" to undefined is invalid.
問題の原因はまだよく分かりませんが、私はしばらく暇にissueを提出して、解決すれば更新します.
転載先:https://juejin.im/post/5cd9756ef265da037941990b
juejin.im/post/5c2043…
Setting data field "$root.0.registered" to undefined is invalid.
私はこのようなセグメントを使ってstorageを読み取るので、undefinedが値を付与できないと判断しなければなりません.
またstateの付与はコールバックではできませんが、閉パケットでdataを取り出す必要があります.
initStates(states) {
for (var key in states) {
var data
mpvue.getStorage({
key,
success(res) {
data = res.data
}
})
if (data) {
states[key] = data
}
}
},
EventBus
イベントバスは通信に使用しないことをお勧めします.mpvueの核心的な優位性はvuexに適していることです.通信用vuexは小さなプロジェクトであっても、vuexの使用コスト自体が低いことです.
では、イベントバスはどのような状況で使用する必要がありますか?
需要シーン
私はログインロジックが最初のページでレンダリングされるときだけ、ログインが必要な場合はすべてログインをチェックすることを望んでいません.
構想
イベントバスとしてvueインスタンスを使用して、loginRequiredイベントをリスニングし、ログインロジックを実行します.ここでのログインロジックは、ウィジェットのインタフェースが非同期であるため、非同期関数です.
トリガ・イベントのインスタンスは後続の論理をブロックし、loginStateのステータスを継続的にリスニングしてログインが完了したかどうかを判断する.
イベントバスはグローバルな使用方法のパッケージとして使用でき、Vuexと組み合わせて非同期の機能をうまく実行できることがわかります.
インプリメンテーション
ここでは単独で持ち出すことを実現します.mpvueのメカニズムはVueとは違いますから.
次はログインロジックの使用を実現するeventbusです.import Vue from 'vue'
import { login } from './utils/index' //
var bus = new Vue({
methods: {
login: async function () {
var state = this.$store.state
if (state.global.loginState <= 0) {
this.$store.commit('changeLoginState', 1)
await login.call(this)
} else {
return
}
},
}
})
bus.$on('loginRequired', () => {
console.log('on event loginRequired');
this.a.login()
})
export default bus
詳細を述べる
$onはmountedには書けません
ここでは、mpvueの各ページが独立したvueインスタンスである重要なポイントについて説明します.
私はmpvueのソースコードを見ていません.どうせこのmountedは実行されません.テストしてみました.APP.vueのmountedも実行しない.
ドキュメントにはこれに対する言い方に気づいていません.もし私が目が見えないなら、指摘してください.
推測すると、mpvueはruntimeを変更したので、new Vue()のときにinitの一連の方法を実行し、ウィジェットを開くとすべてのページのcreatedフックが実行され、beforMountedとmountedフックがonReadyの後に実行され、必ずページにアクセスしてからmountedが実行されるという文章があります.
これはインスタンスを指しません
methodを呼び出すときに使用されるのはthis.a.login()であることに気づいた.これはmpvueのプリコンパイルによるもので、具体的にはプリコンパイル後のmainを見ることができます.js.
computedは使用できません
この問題はまだ解決していないので、私はまず計算する内容を直接v-ifの中に入れました.問題を知っている鉄汁たちは言葉を残した.
Dataにはいくつかのフラグ変数があり、複数のフラグに基づいて内容が表示されるかどうかを計算し、キーのソースコードを直接出す必要があります....
"cu-btn bg-green lg"
v-if="idAvailable && !checking && confirming"
@click="setContact"
>
"cu-btn bg-green lg"
v-if="idAvailable && !checking && !confirming"
>
...
computed {
confirmed: () => this.idAvailable && !this.checking && !this.confirming
}
data () {
return {
from_id: undefined,
idAvailable: false,
checking: true, //
confirming: true, //
}
},
...
計算属性を書いた後にエラーを報告します.しかも2回です.Setting data field "$root.0.confirmed" to undefined is invalid.
問題の原因はまだよく分かりませんが、私はしばらく暇にissueを提出して、解決すれば更新します.
転載先:https://juejin.im/post/5cd9756ef265da037941990b
import Vue from 'vue'
import { login } from './utils/index' //
var bus = new Vue({
methods: {
login: async function () {
var state = this.$store.state
if (state.global.loginState <= 0) {
this.$store.commit('changeLoginState', 1)
await login.call(this)
} else {
return
}
},
}
})
bus.$on('loginRequired', () => {
console.log('on event loginRequired');
this.a.login()
})
export default bus
この問題はまだ解決していないので、私はまず計算する内容を直接v-ifの中に入れました.問題を知っている鉄汁たちは言葉を残した.
Dataにはいくつかのフラグ変数があり、複数のフラグに基づいて内容が表示されるかどうかを計算し、キーのソースコードを直接出す必要があります.
...
"cu-btn bg-green lg"
v-if="idAvailable && !checking && confirming"
@click="setContact"
>
"cu-btn bg-green lg"
v-if="idAvailable && !checking && !confirming"
>
...
computed {
confirmed: () => this.idAvailable && !this.checking && !this.confirming
}
data () {
return {
from_id: undefined,
idAvailable: false,
checking: true, //
confirming: true, //
}
},
...
計算属性を書いた後にエラーを報告します.しかも2回です.
Setting data field "$root.0.confirmed" to undefined is invalid. 問題の原因はまだよく分かりませんが、私はしばらく暇にissueを提出して、解決すれば更新します.
転載先:https://juejin.im/post/5cd9756ef265da037941990b