vue.jsの状態管理vuexにおけるstoreの使用詳細

一、状態管理（vuex）概要
vuexはvue.jsアプリケーションのために開発された状態管理モードです。集中記憶管理アプリケーションのすべてのコンポーネントの状態を採用し、対応する規則保証状態で予測可能な方法で変化します。vuexはまた、ナイフvueのオフィシャルデバッグツールdevtools extensionを統合して、ゼロ配置のtime-travelデバッグ、状態スナップショットの導入、エクスポートなどの高級デバッグ機能を提供しています。
二、状態管理核心
状態管理には5つの核心があります。それぞれstate、getter、mutation、action及びmoduleです。それぞれ簡単に紹介します。
1、state
stateは単一状態ツリーであり、stateにおいて、私たちが管理する配列、オブジェクト、文字列などを定義する必要があります。ここで定義したのは、vue.jsのコンポーネントの中でのみ、あなたが定義したこのオブジェクトの状態を取得することができます。
2、ゲッター
getterはvue.jsの計算属性に似ています。storeのstateからいくつかの状態を派生する必要がある場合、getterを使用して、getterは最初のパラメータとしてstateを受信します。そしてgetterの戻り値はその依存によってキャッシュされます。getterの依存値（stateのいずれかの派生状態が必要な値）が変化したときだけ再計算されます。
3、mutation
storeでstateの状態を変える唯一の方法はmutationを提出することです。各mutationには、文字列タイプのイベントタイプとコールバック関数があります。スタントの値を変更するには、コールバック関数で変更します。このコールバック関数を実行するには、対応する呼び出し方法を実行する必要があります。
4、action
actionはmutationを提出し、actionでstore.com mmitを実行し、actionでは任意の非同期動作が可能である。ページでこのactionを甘えたいなら、store.dispatchを実行します。
5、module
moduleは実はstateの中で複雑で太っている時だけ解決しました。moduleはstoreをモジュールに分割できます。各モジュールの中に自分のstate、mutation、actionとgetterがあります。
三、実例
まずvue.jsプロジェクトを作って、vuexを導入します。

npm install vuex --save

その後、storeフォルダを作成して、store.jsを作成します。store.jsにvueとvuexを導入し、必要な時にaxiosを導入することができます。

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

const state={

  userList:[]

}



const mutations={

  setUserList(state,data){

    state.userList=data;

    ( ：     userList  axios      axios      )

  }

}



const action={

  commitUserList:({commit},userList)=>commit('setUserList',userList)

}

このような簡単なstore.jsはもう完成しました。
インタフェースで私たちはどうやってこの状態管理を使いますか？
まずはscriptでstore.jsを導入します。

<script>

import store from 'store.js   '

data(){

  return{

    userList:store.state.userList;//  state    

  }

},

methods:{

  useAction(){

      var item=['1':'2','a':'c'];

      store.dispatch('setUserList',item);

  }

}

</script>

以上のvue.jsの状態管理vuexにおけるstoreの使用詳細は、小編集が皆さんに共有しているすべての内容です。参考にしていただければと思います。どうぞよろしくお願いします。