vuex経験
はじめに
自分のプロジェクトでvuexを使用しているため、最近MUJI.comでこのコースを再受講しました。さらに理解が深まりました。
vuexは状態管理リポジトリであり、vueプロジェクトの同じページである限り、すべてのコンポーネントはこの倉庫の状態を保存、変更、または読み取ることができます。同じページでない場合は、ブラウザのクッキー、localStorage、sessionStorageを介して状態管理を橋渡しすることができます。つまり、経路を切り替えるときに、localStorageやsessionStorageに値があるかどうかを判断し、値があれば、中の値をvuexの対応する状態に渡します。もし値があれば、Vuexの対応するStateに値を渡します。Vuexに値を格納するたびに、localStorageにコピーを格納することを忘れないでください。もちろん、すべてのステートの値をストレージにバックアップする必要はありません。複数のページに接続する必要があるステートだけをバックアップする必要があります。
State
Stateは状態リポジトリで、1つのフィールドが1つの値に対応する、データを保持するデータベースのようなものです。
実際には、ここでuniqueFlag右を見つけるために、間違って見つけるには、プログラムが問題になります。ページのSHタイプを追加し、SHタイプとSH番号を見つけるためにページを編集します。最初は、関係なく、ページを追加/編集、私は唯一のあなたが同時に2つ以上の編集ページを開く場合、それは問題になる、例えば、正しくないSHタイプを、探します。ほとんどのテストは、編集ページが1つしかないことに慣れているため、この問題を検出しません。
実現は以下の通り：
//I. 定義
state: {
secIndustry: '',//第二業種
},
mutations: {
setSecIndustryAsyc:(state,data) => {
state.secIndustry = {
...state.secIndustry,
...data,
};
},
},
}
//値を変更する
let newObj = {};
let uniqueFlag = ''; //ユニークな識別子
newObj['secIndustry'+ uniqueFlag] = secIndustry;
store.dispatch('setSecIndustry', newObj); //第二業種を設定する
//第三に、 // プロパティが変更された場合、secIndustryの状態内部のストアをリッスンする。
let uniqueFlag = 'xxx'; //ユニークな識別子
computed: {
...mapGetters(['secIndustry'])
},
watch: {
//"secIndustry." + uniqueFlag: function(newV,oldV){
//本来は.アトリビュートの聞き方だが、つなぎ合わせることができず、実装できないことがわかったので、手作業で以下のように書くことにした。
//このように処理される
"secIndustry": function(newV,oldV){
if(newV[uniqueFlag] != oldV[uniqueFlag]){
//何かをする。
}
}
},
mutations
この利点は、デバッグや状態のロールバックのために、状態のすべての変更活動を記録することです。このロールバックは何ですか、利点は何ですか、よく理解していない、プロジェクトでは使用しませんでした。 変異の内部にメソッドの束は、メソッドの最初のパラメータは、状態であり、2番目のパラメータがある場合、それはメソッドに渡されたパラメータです。
変異は、同期変更、増加、状態の値を減少させる限り。プロジェクトでは、主に状態の値の定義では、変異は、操作を変更します。
定義
mutations:{
//es6編集に相当する構文:funcion(){...}
edit(state,payload){
//state.name = 'jack'
state.name = payload.xxx;
}
}
同じページ上の任意のvueの内部で使用します：
this.$store.commit('edit');
this.$store.commit('edit',15)
this.$store.commit('edit',{age:15,sex:' '})
//または、正式には
this.$store.commit({
type:'edit',
payload:{
age:15,
sex:' '
}
})
または
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
},
//または、アクションの簡単な書き方
aEdit({commit},payload){
setTimeout(()=>{
commit('edit',payload)
},2000)
}
}
ここでは、パラメータを受け取るために{}の方法を使用する利点についてお話したいと思います。コードの記述を減らすことができ、一般的にオブジェクトの内部に渡されるものを知っている場合、パラメータを受け取るために{}の方法を使用すると、この方法は、名前の1つ少ない層の値を取るために。上記のコードのように、より少ないコンテキストを書くことができます。ツールの定義では、単語の量を簡素化するために、この方法を使用することができます。
/**
* @desc 変換時間
* @param paraObj
* DetailsVO
* key
* @returns newObj
* xxxx1
* Stringテキストの説明
*/
export function convertTime({DetailsVO,key}) {
let momentObj;
let newObj = {};
if (DetailsVO[key] == '') { //この項目は長期間有効である
momentObj = null;
newObj[key+'1'] = momentObj; //
newObj['timePlaceHolderString'] = '長期的な有効性'
//console.log('==================================')
}else if(DetailsVO[key] != null && DetailsVO[key] != ''){
momentObj = moment(DetailsVO[key] + '', 'YYYY-MM-DD');
newObj[key+'1'] = momentObj; //
}
return newObj;
}
actions
ほとんどの場合、コードを書くのは同期ではなく非同期で処理されるからです。今回はアクションの中に書く必要があります。非同期の操作をムケーションの中に書くと、ステートの中の状態が混乱してしまいます。つまり、ページの値が変わっても、ステートの値は元のままです。
定義
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
ご利用ください：
this.$store.dispatch('aEdit',{age:15})
また、アクションは非同期操作なので、Promiseを使ってカプセル化することができます。
//
actions:{
aEdit(context,payload){
return new Promise((resolve,reject)=>{
//または、ここにajaxリクエストを送る
setTimeout(()=>{
context.commit('edit',payload)
resolve()
//resolve('バックエンドオブジェクト')
},2000)
})
}
}
//
this.$store.dispatch('aEdit',{age:15}).then((returnObj)=>{
//何かをする。
//例えば、バックエンドのデータを取得して、このコンポーネントのデータ値を変更する；
})
アクションは、aync awaitと組み合わせて使用します。より高度な書き方です。
通常の開発では、情報収集コンポーネントに、配列に詰め込まれた複数のデータを収集させ、他のコンポーネントで、ボタンがクリックされると、このことがトリガされ、データの収集が完了し、収集されたデータをパラメータとして他のインターフェースを呼び出す、という要求に遭遇します。実際には、このように、状態フィールドを設定し、非同期待機モードでアクションを記述し、情報収集コンポーネントの状態変化をリッスンし、変化したときに、そのことが終了したときにデータの収集を行い、他のことを行う前に、それを行うことができます。これで問題は解決するはずです。 この要件を一文で要約すると、状態を変更し、他のことをする前に状態が変更されるのを待つということです。
//
actions:{
async aEdit(context,payload){
return new Promise((resolve,reject)=>{
//または、ここにajaxリクエストを送る，setTimeOut
setTimeout(()=>{
context.commit('edit',payload)
resolve('ok ')
//resolve('バックエンドオブジェクト')
},2000)
})
}
}
//
try {
let res = await this.$store.dispatch('aEdit',{age:15})
if(res === 'ok '){
//何かをする。
//情報収集を終えて、他のことをするときである。
}
}catch(err){
}
})
// getDataがPromiseを返すとする。
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // actionAの完了を待つ
commit('gotOtherData', await getOtherData())
}
}
getters
お金を貯める目的は何かというと、お金を取って使うことです。ゲッターズはお金を取ること、それが一番楽しいことです。ゲッターズとアクションズは子供と大人のようなもので、子供はお金を使う人です。
公式な言い方をすれば、ゲッターは国家の内部で国家を暴露しているのです。
//
getters:{
nameInfo(state){
return " :"+state.name
},
}
//Vueファイルで同じページを使う
this.$store.getters.fullInfo
modules
プロジェクトが中規模と大規模に属する場合、処理ロジックは、頻繁に多くのゲッター、アクション、変異、状態を記述する必要があります。各関数は、独自の対応するゲッター、アクション、変異を持って、関数ごとに分割した場合、コードのメンテナンスが上がります、モジュールは、このためのものです。
ヘルパー関数
このヘルパー関数は、開発者がVuexを高速かつ簡潔に使用できるように設計されており、オブジェクト展開演算子とマッピングを使用することで、store.commit store.dispatch store.gettersという長くて胡散臭いステートメントを使用する必要がありません。
定義は簡単で、ゲッターとステートはcomputedに、mapMutationsとmapActionsはmethodに。 なぜゲッターをdataに置かないのですか？なぜなら、ビジネスでは状態の値を追跡してリアルタイムに更新する必要があり、dataはある瞬間の状態の値しか取得できないからです。
computed: {
// オブジェクト展開演算子を使ってゲッターを計算オブジェクトに混ぜる
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
]),
// オブジェクト拡張演算子を使って、計算オブジェクトに状態を混ぜる
// mapStateは少し冗長なので、ゲッターを使ってもいい。
...mapState([
'doneTodosCount',
'anotherGetter',
// ...
])
}
},
methods:{
...mapMutations([
'increment' // thisをマッピングする.increment() thisの場合.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // thisをマッピングする.add() thisの場合.$store.commit('increment')
}),
...mapActions([
'increment', // `this.increment()` マッピングは`this.$store.dispatch('increment')`
// `mapActions` ロードもサポートされている：
'incrementBy' // `this.incrementBy(amount)` マッピングは`this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // `this.add()` マッピングは`this.$store.dispatch('increment')`
})
},
ご利用ください：
//値を渡す必要がある場合は引数を与え、そうでない場合は直接呼び出す。
this.increment({ amount: 10 }) または this.add({ amount: 10 })
this.increment() または this.add()
ヘルパー関数は、Vuexを使い始めた当初に使用することはお勧めしません。
