vexの持続化

vuex
vuexはvue専用です.jsアプリケーション開発のステータス管理モード.集中型ストレージ管理アプリケーションのすべてのコンポーネントの状態を採用し、対応するルールで状態が予測可能な方法で変化することを保証する.  
簡単に言えば:状態化管理で、データをキャッシュすることができて、性能を高めることができて、それは1つのグローバルな状態で、ページはそれにアクセスすることができて、データをキャッシュすることができて、ページは繰り返しデータの要求を提出する必要はなくて、ページのレンダリングは比較的に速くて、状態はいったん変えたら、devtoolsの中で状態の変化を見ることができます;いくつかの複雑な非親子通信を解決することができます.
 
vuexには5つのコア概念があります.
1.state:vuexの基本データで、変数2を格納する.getters:storeのstateからいくつかの状態を派生することができ、gettersの戻り値はその依存に基づいてキャッシュされ、その依存値が変化した場合にのみ再計算されます.3.mutations:更新データsをコミットする方法は、同期する必要があります(actionを非同期で使用する必要がある場合).各mutationsには、文字列のイベントタイプ(type)とコールバック関数(handler)があります.t 4.Actions:mutationsの機能とほぼ同じで、違いは

Actionsは、ステータスを直接変更するのではなく、mutationsをコミットします.

Actionsは、任意の非同期動作を含むことができる.

5.modules:vuexをモジュール化し、各モジュールに独自のstate、mutations、actions、gettersを持たせることで、構造が非常に明確で、管理が便利になります.
 
State
vueのComputedによってvuexのstateを得ることができ、以下のようにvuexのindexを得ることができる.js

export default new vuex.Store({
  state: {
    MvList:[],
    carNum:8,
    Msg:"     "
  },
  })

コンポーネントのステータスを取得

   computed:{
         Msg(){
             return this.$store.state.Msg
         },
        carNum(){
             return this.$store.state.carNum
        }
    }

 
mapState補助関数
1つのコンポーネントが複数のステータスを取得する必要がある場合、これらのステータスを計算プロパティとして宣言すると、重複と冗長性があります.この問題を解決するために、私たちは`mapState`補助関数を使用して計算属性を生成することができます.
もちろんimport{mapState}from'vuex'を導入しなければなりません

computed:{
     ...mapState(['carNum','Msg',]),
    }

getters
gettersはstateを第1のパラメータとして受信し、他のgettersを第2のパラメータとして受信し、必要でなければ、第2のパラメータは以下の例を省略することができる.

const store = new Vuex.Store({ 
state: { count:0 }，
getters: { 
countDouble: function(state){ //    
   return state.count \* 2 
},
countDoubleAndDouble: function(state, getters) {
 return getters.countDouble \* 2
    }
   } 
})

stateと同様に、VueのComputedでVuexのgettersを得ることもできます.

const app = new Vue({
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
})    
}

 
mapGetters補助関数
mapGetters補助関数はstoreのgettersを局所計算属性にマッピングするだけであり、stateと同様にimport{mapGetters}from'vuex'を最初に導入しなければならない.

export default { 
  computed: { 
//            getters    computed     
...mapGetters([ 'countDouble', 'CountDoubleAndDouble']) 
}
}

mutations
mutationのコミットは、Vuexのstoreのステータスを変更する唯一の方法です.mutationは同期でなければなりません.非同期でactionを使用する必要がある場合は.  

export default new Vuex.Store({
  state: {
    MvList:[],
    carNum:8,
    Msg:"     "
  },
  mutations: {
    ChangeCarnum(state){
     state.carNum++
    },
    })

methods:{
    todoChange(){
       this.$store.commit("ChangeCarnum")
    },
 }

mapMutations補助関数
他の補助関数と同様に、コンポーネントでthis.$を使用できます.store.commit(「xxx」)はmutationをコミットするか、mapMutations補助関数を使用してコンポーネント内のmethodsをstoreにマッピングする.commit呼び出し(ルートノードにstoreを注入する必要があります).  
まずimport{mapMutations}from'vuex'を導入しなければなりません

export default {
  methods: {
     ...mapMutations([ChangeCarnum]),
   //    this.increment()  this.$store.commit('ChangeCarnum')
 }
}

アクションの配布
アクションはstoreを通ります.dispatchメソッドはstoreをトリガする.dispatch('changgeMsgAsync')

   changgeMsgAsync(){     
        this.$store.dispatch("changgeMsgAsync")//    actions           
    },

Actionsは一般的に非同期操作をします

 actions: {
    changgeMsgAsync(){
      axios.get('/vue/mv').then(res=>{
        console.log(res.data.result)
        // this.commit("getMsg",res.data)
        this.commit(getMv,res.data)
      })
    }
  },

mapActions補助関数
コンポーネントでthis.$を使用しますstore.dispatch('xxx')はactionを配布するか、mapActions補助関数を使用してコンポーネントのmethodsをstoreにマッピングする.dispatch呼び出し(ルートノードにstoreを先に注入する必要があります):
まずimport{mapActions}from'vuex'を導入しなければなりません

   methods:{
        ...mapActions([
         'changgeMsgAsync'
        ]),
     }

Modules
単一のステータスツリーを使用すると、アプリケーションのすべてのステータスが大きなオブジェクトに集中します.しかし,アプリケーションが大きくなるとstoreオブジェクトは肥大化する.モジュール分割

const module = { 
  state: { ... },
  mutations: { ... },
  actions: { ... }, 
  getters: { ... }
}
export default module

const module = { 
  state: { ... },
  mutations: { ... },
  actions: { ... }, 
  getters: { ... }
  export default module
}

indexでjsにサブstoreモジュールファイルのimport city from'./を導入moudule/cityMoudle'

  modules: { 
    city
  }

サブstoreでネーミングスペースnamespaced:trueを開くと、ステータスにアクセスできます.

computed:{
     ...mapState("city",['carNum','Msg',]),
}

各部門が管理しなければならない共有状態を私に管理してください........
 
vuexには不老不死があるのを知っていますか?

vuexの利点:sessionStorageよりもデータの格納が安全で、sessionStorageはコンソールで見ることができます.

vuex劣勢:F 5がページをリフレッシュするとvuexがstateを再更新するため、格納データは

を失う.
そこでこの問題を克服するためにvuex-persistedstateが現れました

まずcnpm i--save vuex-persistedstateまたはnpm install vuex-persistedstate--save

をダウンロードする

vuexに導入:

import createPersistedState from 'vuex-persistedstate'

vuexでnew Vue.stroe設定:

const store = new Vuex.Store({
//     ，        ，       
plugins:\[createPersistedState({ 
storage:window.localStorage  //     localstorage    reducer(val){ 
//                  
return{ //   state  
user user:val.user
} 
//        
} 
})\], 
}）

大体vuexのいくつかの知識を整理しました