Vue.js 2.0のVuex 2.0について、更新する知識ベースが必要です.

17195 ワード
構造の適用
実際、Vuexはコード構造をどのように組織するかに制限はありません.逆に、一連の高度な原則を強制的に規定しています.
  • アプリケーションレベルのステータスセットはstoreに格納されます.
  • ステータスを変更する唯一の方法はmutationsをコミットすることです.これは同期トランザクションです.
  • 非同期論理はactionにカプセル化されるべきである.

    • これらのルールに従う限り、どのようにプロジェクトの構造を構築するかはあなた次第です.storeファイルが非常に大きい場合は、action、mutation、getterの複数のファイルに分割するだけでいいです.
    少し複雑なアプリケーションでは、モジュールを使用する必要があるかもしれません.以下は、シンプルなプロジェクトアーキテクチャです.
    ├── index.html
├── main.js
├── api
│   └── ... #      API   
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          #    modules 、export store
    ├── actions.js        #   action
    ├── mutations.js      #   mutations
    └── modules
        ├── cart.js       # cart   
        └── products.js   # products

    詳細については、カートのインスタンスを参照してください.
    Modules
    単一のステータスツリーが使用されているため、適用されるすべてのステータスは大きなオブジェクトに含まれます.しかし,我々の応用規模が増加するにつれて,このStoreは非常に肥大化している.
    この問題を解決するために、Vuexはstoreをmodule(モジュール)に分けることができます.各モジュールには、それぞれのステータス、mutation、action、getter、さらにはネストされたモジュールが含まれています.以下のように組織されています.
    const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA's state
store.state.b // -> moduleB's state

    モジュールローカルステータス
    モジュールのmutationsメソッドとgettersメソッドの最初の受信パラメータは、モジュールのローカル状態です.
    const moduleA = {
  state: { count: 0 },
  mutations: {
    increment: (state) {
      // state         。
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

    同様に、モジュールのactionsでは、context.stateがローカル状態であり、context.rootStateがルート状態である.
    const moduleA = {
  // ...
  actions: {
    incrementIfOdd ({ state, commit }) {
      if (state.count % 2 === 1) {
        commit('increment')
      }
    }
  }
}

    モジュールのgetters内では,ルート状態も3番目のパラメータとして露出する.
    const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

    ネーミングスペース
    モジュール内のactions、mutations、gettersは依然としてグローバルネーミングスペースに登録されていることに注意してください.これにより、複数のモジュールが同じmutation/actionタイプに応答します.モジュール名に接頭辞または接尾辞を追加してネーミングスペースを設定し、ネーミング競合を回避できます.もしあなたのVuexモジュールが多重化可能で、実行環境も未知であれば、あなたはそうすべきです.todosモジュールを作成します.
    // types.js

//    getter、 action   mutation      
//            `todos`    
export const DONE_COUNT = 'todos/DONE_COUNT'
export const FETCH_ALL = 'todos/FETCH_ALL'
export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
    // modules/todos.js
import * as types from '../types'

//            getters, actions and mutations 
const todosModule = {
  state: { todos: [] },

  getters: {
    [types.DONE_COUNT] (state) {
      // ...
    }
  },

  actions: {
    [types.FETCH_ALL] (context, payload) {
      // ...
    }
  },

  mutations: {
    [types.TOGGLE_DONE] (state, payload) {
      // ...
    }
  }
}

    ダイナミックモジュールの登録store.registerModuleメソッドでstore作成後にモジュールを登録できます.
    store.registerModule('myModule', {
  // ...
})

    モジュールのstore.state.myModuleは、モジュールの状態に曝される.
    他のVueプラグインは、アプリケーションのstoreにモジュールを追加し、動的に登録することでVuexのステータス管理機能を使用することができます.例えば、vuex-router-syncライブラリは、動的に登録されたモジュールでアプリケーションのルーティング状態を管理することによって、vue−routerおよびvuexを統合する.
    動的に登録されたモジュールをstore.unregisterModule(moduleName)で削除することもできます.しかし、この方法で静的モジュール(つまりstoreが作成されたときに宣言されたモジュール)を削除することはできません.
    Plugins
    Vuexのstoreはpluginsオプションを受信し、このオプションは各mutationのフックを露出する.Vuexのプラグインは、sotreを一意のパラメータとして受信する簡単な方法です.
    const myPlugin = store => {
  //   store            
  store.subscribe((mutation, state) => {
    // mutation      
    // mutation      {type, payload}。
  })
}

    次のように使用します.
    const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

    プラグイン内でのMutationsのコミット
    プラグインはステータスを直接変更することはできません.これはあなたのコンポーネントのように、mutationsによって変更をトリガーするしかありません.
    mutationsをコミットすることで、プラグインはstoreにデータソースを同期するために使用できます.たとえば、websocketデータソースをstoreに同期するために(これは使用例を説明するためのものであり、実際にはcreatePluginメソッドは複雑なタスクを完了するためにより多くのオプションを追加する).
    export default function createWebSocketPlugin (socket) {
  return store => {
    socket.on('data', data => {
      store.commit('receiveData', data)
    })
    store.subscribe(mutation => {
      if (mutation.type === 'UPDATE_DATA') {
        socket.emit('update', mutation.payload)
      }
    })
  }
}
    const plugin = createWebSocketPlugin(socket)

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [plugin]
})

    ステータススナップショットの生成
    プラグインは、ステータスの[スナップショット](Snapshot)とステータスの変化の前後の変化を取得したい場合があります.これらの機能を実現するには、ステータスオブジェクトを深くコピーする必要があります.
    const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    //    prevState   nextState...

    //     ，      mutation
    prevState = nextState
  })
}

    **ステータススナップショットを生成するプラグインは、開発段階でのみ使用できます.WebpackまたはBrowserifyを使用して、構築ツールで処理してください.
    const store = new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

    プラグインはデフォルトで使用されます.製品をリリースするには、WebpackのDefinePluginまたはBrowserifyのenvifyを使用してprocess.env.NODE_ENV !== 'production'の値をfalseに変換する必要があります.
    ロガープラグイン内蔵
    vue-devtoolsを使用している場合は、必要ないかもしれません.
    Vuexには、一般的なデバッグ用のログプラグインが用意されています.
    import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
  plugins: [createLogger()]
})
    createLoggerメソッドには、いくつかの構成項目があります.
    const logger = createLogger({
  collapsed: false, //        mutation
  transformer (state) {
    //           
    //   ，        
    return state.subTree
  },
  mutationTransformer (mutation) {
    // mutation    { type, payload }
    //                 
    return mutation.type
  }
})

    ログ・プラグインは、<script>のラベルを直接通過することもでき、グローバル・メソッドcreateVuexLoggerを提供します.
    loggerプラグインはステータススナップショットを生成するので、開発環境でのみ使用できます.
    厳格モード
    厳格モードを有効にするには、Vuex storeを作成するときにstrict: trueに簡単に入力します.
    const store = new Vuex.Store({
  // ...
  strict: true
})

    厳格モードでは,Vuex状態がmutationメソッドの外で修正されるとエラーが投げ出される.これにより、すべてのステータス変更がデバッグツールによって明確に追跡されることが保証されます.
    開発フェーズvs.リリースフェーズ
  • リリースフェーズで厳格なモードをオンにしないでください.厳格なモードでは、ステータスツリーの深さモニタリングを行い、不適切な変更を検出します.パフォーマンス損失を回避するために、リリースフェーズでオフにすることを保証します.

    • プラグインの処理と同様に、コンストラクションツールで処理できます.
    const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

    関連参照
  • http://vuex.vuejs.org/en/plugins.html
  • http://vuex.vuejs.org/en/strict.html
  • http://vuex.vuejs.org/en/modules.html
  • http://vuex.vuejs.org/en/structure.html
    • sql serverデータベースの追加データベースに失敗したレポートについて
    unicorn+nginx+centos導入およびサーバ構成