[vue log-vuex] VueX（Vue状態管理モード）

まず、VueXについて知る

1.1についてVueX

VueXこれはVue、プロジェクト開発での使用に適した状態管理ツールです。プロジェクト開発dataで値を同期するためにコンポーネントパラメータ転送を頻繁に使用する場合、プロジェクトが非常に大きくなると、これらの値の管理と維持は非常に難しい作業になると想像してください。この目的のVueために、複数のコンポーネントで頻繁に使用されるこれらの値に対して、統合された管理ツールが提供されますVueX。ではVueX、既存Vueのプロジェクト、我々だけでこれらの値を定義する必要がありVueX、その後、彼らはで使用することができるVueの部品全体のプロジェクト。

1.2インストール

それは以来VueX行われVueCliた後の学習を参照してくださいVueCli 2.x内蔵されたディレクトリ下に表示される項目のリストについて。

次の手順の前提は、Vueプロジェクトの構築が完了し、プロジェクトのファイルディレクトリに移動したことです。

• NpmはVuexをインストールします

npm i vuex -s

• プロジェクトのルートディレクトリの下に新しいstoreフォルダを追加し、そのフォルダに作成しますindex.js

この時点で、プロジェクトのsrcフォルダーは次のようになります。

│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

1.3使用

1.3.1内容storeの下での初期化index.js

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    
    
    state:{
    
    
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

1.3.2store現在のプロジェクトのVueインスタンスにマウントする

main.jsを開きます

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    
    
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

1.3.3コンポーネントでVuexを使用する

たとえば、App.vueでは、状態で定義された名前を使用してh1タグに表示する必要があります

<template>
    <div id='app'>
        name:
        <h1>{
    
    {
    
     $store.state.name }}</h1>
    </div>
</template>

またはコンポーネントメソッドで使用する

...,
methods:{
    
    
    add(){
    
    
      console.log(this.$store.state.name)
    }
},
...

ここstateでステータスの値を変更しないでください。後で説明します。

1.4VueDevtoolsをインストールします

Vueプロジェクトの開発では、プロジェクト内のさまざまな値を監視する必要があります。効率を向上させるために、Vueはブラウザー拡張機能（VueDevtools）を提供します。

VueXを学ぶときは、このプラグインを使用する必要があります。このプラグインの使用については、公式サイトに移動できるので、ここでは繰り返しません。

次に、VueXのコアコンテンツ

VueXオブジェクトにはstate、メンバーだけでなくstate、データを操作するために使用されるメソッドセット、およびデータを整列stateする必要があるときに処理する必要があるメソッドセットもあります。

メンバーリスト：

• 状態保存状態
• ミューテーションステートメンバーの操作
• ゲッターは州のメンバーを外の世界に処理します
• アクション非同期操作
• モジュールモジュラー状態管理

2.1VueXワークフロー

まずVue、コンポーネントVueXが特定のメソッドを呼び出すプロセス中にバックエンドにリクエストを送信する必要がある場合、または非同期操作が発生した場合、データの同期を確保するためにdispatchVueXactionsのメソッドが必要です。非同期操作のメソッドを動作さactionせることが存在していると言えますmutations。

非同期操作がない場合は、コンポーネントの状態でMutationsに自分で記述したメソッドを直接送信して、stateメンバーで操作を実行できます。直接変更（たとえば:)は監視できないため、1.3.3コンポーネント内のstateメンバーを直接操作することは推奨されないことがセクションで説明されていることに注意してください。this.$store.state.name = 'hello'VueDevtools

最後に変更された状態メンバーは、コンポーネントの元の位置にレンダリングされます。

2.2突然変異

ミューテーションは、データの変更、追加、削除など、状態データを操作するためのメソッドのコレクションです。

2.2.1ミューテーションの使用方法

mutationsメソッドにはデフォルトのパラメーターがあります。

([state] [,payload])

• state現在のVueXオブジェクトにありますstate
• payloadこのメソッドは、呼び出されたときにパラメーターを渡すために使用されます

たとえば、メソッドを作成する場合、実行時に次の例の名前の値をに変更できます。"jack"これを行うだけで済みます。

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex({
    
    
    state:{
    
    
        name:'helloVueX'
    },
    mutations:{
    
    
        //es6语法，等同edit:funcion(){...}
        edit(state){
    
    
            state.name = 'jack'
        }
    }
})

export default store

コンポーネントでは、これを次のように呼び出す必要がありますmutation-たとえば、App.vueの1つでmethod：

this.$store.commit('edit')

2.2.2突然変異の受け渡し値

実際の生産プロセスでは、特定のを送信するmutationときに、メソッドにいくつかのパラメーターを運ぶ必要があります。

単一の値が送信されたとき

this.$store.commit('edit',15)

複数のパラメータを送信する必要がある場合は、送信するオブジェクトにそれらを配置することをお勧めします。

this.$store.commit('edit',{
    
    age:15,sex:'男'})

マウントされたパラメータを受信します。

edit(state,payload){
    
    
     state.name = 'jack'
      console.log(payload) // 15或{age:15,sex:'男'}
  }

提出する別の方法

this.$store.commit({
    
    
    type:'edit',
    payload:{
    
    
        age:15,
        sex:'男'
    }
})

2.2.3状態のメンバーの追加と削除

Vueのレスポンシブデータと連携するには、Vueが提供するメソッドを使用してMutationsのメソッドを操作する必要があります。場合deleteやxx.xx = xxフォーム追加したり、削除、データVueがリアルタイムに応答することはできません。

• Vue.setは、オブジェクトのメンバーの値を設定します。存在しない場合は、追加します。

  たとえば、年齢メンバーを状態オブジェクトに追加します

  Vue.set(state,"age",15)
  

• Vue.delete削除メンバー

  追加したばかりの年齢メンバーを削除します

  Vue.delete(state,'age')
  

2.3ゲッター

stateメンバーは処理され、外の世界に渡されます

Gettersのメソッドには、2つのデフォルトパラメータがあります

• state現在のVueXオブジェクトの状態オブジェクト
• getters現在のgettersオブジェクト。getterの下で他のgetterを使用するために使用されます。

例えば

getters:{
    
    
    nameInfo(state){
    
    
        return "姓名:"+state.name
    },
    fullInfo(state,getters){
    
    
        return getters.nameInfo+'年龄:'+state.age
    }  
}

コンポーネントを呼び出す

this.$store.getters.fullInfo

2.4アクション

mutationメソッド内で直接非同期操作が行われるため、データが無効になります。そのため、特に非同期操作を実行し、最終的にmutationメソッドを送信するためのアクションが提供されます。

Actionsのメソッドには2つのデフォルトパラメータがあります

• context コンテキスト（矢印関数のこれに相当）オブジェクト
• payloadパラメータのマウント
  たとえば、2秒後に2.2.2セクションのeditメソッドを実行します

それはので、setTimeout非同期操作で、あなたが使用する必要がありますactions

actions:{
    
    
    aEdit(context,payload){
    
    
        setTimeout(()=>{
    
    
            context.commit('edit',payload)
        },2000)
    }
}

コンポーネントを呼び出します。

this.$store.dispatch('aEdit',{
    
    age:15})

改善：

非同期操作なので、非同期操作をPromiseオブジェクトとしてカプセル化できます

aEdit(context,payload){
    
    
    return new Promise((resolve,reject)=>{
    
    
        setTimeout(()=>{
    
    
            context.commit('edit',payload)
            resolve()
        },2000)
    })
}

2.5モデル

プロジェクトが大きく、ステータスが非常に大きい場合は、モジュラー管理モードを採用できます。Vuexを使用すると、ストアをモジュールに分割できます。各モジュールは、それ自身の持っているstate、mutation、action、getterモジュール、さらにネストされたサブ-上から下に同じ方法で分割します。

models:{
    
    
    a:{
    
    
        state:{
    
    },
        getters:{
    
    },
        ....
    }
}

コンポーネント内のモジュールaの呼び出しの状態：

this.$store.state.a

また、submitまたはdispatchメソッドは以前と同じであり、すべてのモジュールの対応するタイプのメソッドが自動的に実行されます。

this.$store.commit('editKey')
this.$store.dispatch('aEditKey')

2.5.1モジュールの詳細

• モジュール内mutationsおよびgettersメソッド内のメソッドによって受け入れられる最初のパラメーターは、それ自体のローカルモジュール内の状態です。

models:{
    
    
    a:{
    
    
        state:{
    
    key:5},
        mutations:{
    
    
            editKey(state){
    
    
                state.key = 9
            }
        },
        ....
    }
}

• gettersメソッドの3番目のパラメーターは、ルートノードの状態です。

models:{
    
    
    a:{
    
    
        state:{
    
    key:5},
        getters:{
    
    
            getKeyCount(state,getter,rootState){
    
    
                return  rootState.key + state.key
            }
        },
        ....
    }
}

• actionsローカルモジュールの状態を取得するメソッドのメソッドはcontext.stateであり、ルートノードの状態はcontext.rootStateです。

models:{
    
    
    a:{
    
    
        state:{
    
    key:5},
        actions:{
    
    
            aEidtKey(context){
    
    
                if(context.state.key === context.rootState.key){
    
    
                    context.commit('editKey')
                }
            }
        },
        ....
    }
}

3つ目は、ディレクトリ構造を標準化することです。

全体storeをindex.js真ん中に置くのは無理なので、分割する必要があります。より適切なディレクトリ形式は次のとおりです。

store:.
│  actions.js
│  getters.js
│  index.js
│  mutations.js
│  mutations_type.js   ##该项为存放mutaions方法常量的文件，按需要可加入
│
└─modules
        Astore.js

対応するコンテンツは、以前index.jsと同様に対応するファイルに保存され、に保存されてエクスポートされstoreます。stateデータをindex.js中央に配置してみてください。そしてmodules、Astore多くの単語の状態も分解できる場合は、ローカルモジュール。