vuexすべてのstateをリセット(カスタマイズ可能)
2347 ワード
正式なシーンでは、ページを登録したり、他の操作をしたりするときに、すべてのvuexをリセットして初期状態にする必要があるという問題がよく発生します.では、1、ページのリフレッシュ:
この方法はルーティングによって最適化や論理最適化を判断し,常にページを再ロードするとユーザ体験が悪くなり,ブラウザにとっても不要な負担になるので,試してからあきらめた.
2、リセットの方法を書いて取り出す
これにより、複数のmodule、複数のstateが発生し、手動で複数を追加する必要があり、作業量が大きく、メンテナンスが容易ではありません.また、stateが最初に個々の配列であれば、1つのオブジェクトがより操作しにくく、最も優れているのは、最初のときに深くコピーすることですが、各moduleで操作とパッケージ化する必要があります.
この2つの方法は問題を解決することができますが、私はまだこの2つの方法を採用していません.何かを犠牲にして目的を達成したような気がします.私の繰り返しの実践を通じて、私は以下の方法を模索しました.
まずページのロードです.最初のロードでstoreを導入したとき、storeのすべてのstateが初期値に違いありません.では、ローカルキャッシュを作成して記録します.ここではstoreプラグインを採用しています(参照方法参照).https://github.com/nbubna/store)
メールでjs vueインスタンスを作成する前に:
私たちは知っています.jsはページ読み込み時に一度実行されるので、キャッシュのinitStateは自分がstoreのstate状態(moduleのすべてのstateを含む)を最初に作成します.
次にstoreで作成したグローバルにmutationメソッドを書きますここではstoreプラグイン(リファレンスリファレンスリファレンス)を採用しましたhttps://github.com/nbubna/store)ここではlodashプラグインを採用しました(参照方法リファレンスhttps://www.lodashjs.com/)
このresetAllStateというmutationメソッドでは、グローバルなstateを私たちがキャッシュしたstateに置き換えることです.ここでpayloadはなぜ配列なのでしょうか?これがタイトルに記載されているカスタマイズ可能なため、ページ内でほとんどのステータスをリセットしますが、いくつかのステータスを保持する必要がある場合は、転送されたstate値によって対応するstateを削除し、更新されないようにすることができます.もちろん、値を入力して対応する値を更新することもできます.他のすべての値は更新されません(ここでは詳しく説明しません).
以上、私が実践的に考えた方法で、不足しているところがあるかもしれませんが、質問、交流、またはより良い提案を歓迎します.ありがとう
window.location.reload()
この方法はルーティングによって最適化や論理最適化を判断し,常にページを再ロードするとユーザ体験が悪くなり,ブラウザにとっても不要な負担になるので,試してからあきらめた.
2、リセットの方法を書いて取り出す
actions.resetVuex = function() {
store.commit(state.a, null)
store.commit(state.b, null)
store.commit(state.c, null)
...
}
store.dispatch('resetVuex')
これにより、複数のmodule、複数のstateが発生し、手動で複数を追加する必要があり、作業量が大きく、メンテナンスが容易ではありません.また、stateが最初に個々の配列であれば、1つのオブジェクトがより操作しにくく、最も優れているのは、最初のときに深くコピーすることですが、各moduleで操作とパッケージ化する必要があります.
この2つの方法は問題を解決することができますが、私はまだこの2つの方法を採用していません.何かを犠牲にして目的を達成したような気がします.私の繰り返しの実践を通じて、私は以下の方法を模索しました.
まずページのロードです.最初のロードでstoreを導入したとき、storeのすべてのstateが初期値に違いありません.では、ローカルキャッシュを作成して記録します.ここではstoreプラグインを採用しています(参照方法参照).https://github.com/nbubna/store)
メールでjs vueインスタンスを作成する前に:
import _store from 'store'
import createStore from './store'
...
const store = createStore() // vuex
_store({ initState: store.state }) // initState
私たちは知っています.jsはページ読み込み時に一度実行されるので、キャッシュのinitStateは自分がstoreのstate状態(moduleのすべてのstateを含む)を最初に作成します.
次にstoreで作成したグローバルにmutationメソッドを書きますここではstoreプラグイン(リファレンスリファレンスリファレンス)を採用しましたhttps://github.com/nbubna/store)ここではlodashプラグインを採用しました(参照方法リファレンスhttps://www.lodashjs.com/)
import _ from 'lodash'
import _store from 'store2'
...
const store = new Vuex.Store({
state: {
token: ''
},
mutations: {
resetAllState (state, payload = []) {
if (payload instanceof Array === false) { //
return
}
const initState = _store('initState') //
const _initState = payload.length ? _.omit(initState, payload) : initState // ,
_.extend(state, _initState)
}
},
modules: {
...
}
})
このresetAllStateというmutationメソッドでは、グローバルなstateを私たちがキャッシュしたstateに置き換えることです.ここでpayloadはなぜ配列なのでしょうか?これがタイトルに記載されているカスタマイズ可能なため、ページ内でほとんどのステータスをリセットしますが、いくつかのステータスを保持する必要がある場合は、転送されたstate値によって対応するstateを削除し、更新されないようにすることができます.もちろん、値を入力して対応する値を更新することもできます.他のすべての値は更新されません(ここでは詳しく説明しません).
以上、私が実践的に考えた方法で、不足しているところがあるかもしれませんが、質問、交流、またはより良い提案を歓迎します.ありがとう