vuex
Vuexは一方向のデータフローを実装しており、グローバルにはデータを格納するStateがあり、コンポーネントがStateのデータを変更したい場合は、Mutationを介して実行する必要があります。Mutationは同時に、外部プラグインがStateデータの更新を取得するために呼び出すためのサブスクライバモデルを提供します。そして、すべての非同期操作またはバッチ同期操作は、アクションを移動する必要がありますが、アクションはまた、直接Stateを変更することはできません、またはミューテーションを介してStateデータを変更する必要がある場合。最後に、状態の変更に応じて、ビューにレンダリングします。
vuex各モジュールの機能
VuexlocalStorageでは
vuexはvueのステートマネージャで、保存されたデータはレスポンシブです。しかし、保存はされず、リフレッシュ後に初期状態に戻ります。
let defaultCity = "
try { // ユーザーは、ローカル・ストレージの機能をオフにしてから、アウター・レイヤーにtryを追加する。...catch
if (!defaultCity){
defaultCity = JSON.parse(window.localStorage.getItem('defaultCity'))
}
}catch(e){}
export default new Vuex.Store({
state: {
city: defaultCity
},
mutations: {
changeCity(state, city) {
state.city = city
try {
window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
// データが変更されたら、データをコピーしてlocalStorageに保存する。
} catch (e) {}
}
}
})
ここで注意点として、vuexでは保存された状態は配列であり、localStorageは文字列しかサポートしていないため、JSONを使って変換する必要があります:JSON.stringify(state.subscribeList); // array -> string
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array