vuexの勉強

5773 ワード
vuexって何?
  • vuexはvue専用である.jsアプリケーション開発のステータス管理モード
  • すべてのコンポーネントの状態を一元化ストレージ管理アプリケーションで適用し、その状態が予測可能な方法で変化することを対応するルールで保証する
    • .
  • vuexもvueの公式調式ツールdevtools extension
    • に統合されています.
    ステータス管理とは何ですか?
  • 簡単な点は、複数のコンポーネントが共有する必要がある変数をすべて1つのオブジェクトに格納し、そのオブジェクトを最上位のインスタンスに配置し、他のコンポーネントが
    • を使用できるようにすることです.
  • なぜ私たちは自分でオブジェクトをカプセル化して管理しないのですか?
  • vuexにカプセル化するデータは応答式
    • に直接できるからである.
    いつvuexを使うか
  • 複数のビューが同じ状態に依存する場合
    • vuex基本使用
  •   src        store，      index.js  ，
 import Vue from 'vue'
 import Vuex from 'vuex'
 // 1.    
 Vue.use(Vuex)
 //    
 const store = new Vuex.Store({
   state:{
     count:0
   },
   mutations:{
     increment(state){
       state.count++
     }
   }
 })
  •         Vue        store  
     main.js  ，  store  ，   new Vue 
     ，         this.$store   ，     store   
   import Vue from 'vue'
   import App from 'App'
   import store from './store'
   new Vue({
     el:'#app',
     store,
     render:h=>h(App)
   })

  •    vuex  count
   this.$store.state.          
   this.$store.commit('mutatiom   ')
  • 注意事項:
  • storeを直接変更するのではなくmutationを提出することによってstate.count
  • これは、vuexが状態の変化をより明確に追跡できるため、storeを直接変更することはない.state.countの値
    • vuexのいくつかのコアの概念
  • state
  • getters
  • mutations
  • actions
  • module

    • state
  • 共有ソースデータを格納
  • データの修正はここでgetter
    • を行わない.
  •           store     state      
   ：       ，         20    
  getters:{
    greaterAgestu:state=>{
      return state.students.filter(s => s.age>=20)
    }
  }
  getter        ，     ，   getters         
   ：  ID      
  getters:{
    stuByid:state=>{
      return id=>{
        return state.students.find(s=> s.id===id)
      }
    }
  }

    • mutation
  • vuexでstore状態更新唯一の方法:Mutation
    • をコミットする
  • mutationの主な2つの部分:1.文字列のイベントタイプ(type)2.state
    • であるコールバック関数(handler)
  •  mutations   
 mutations:{
   increment(state){
     state.count++
   }
 }
      mutation  
 increment：function(){
   this.$store.commit('increment')
 }
  •   mutation                   
  decrement：funtion(){
    this.$store.commit('decrement',2)
  }

  decrement(state,n){
    state.count -= n
  }

  mutation      
      this.$store.commit('decrement',{count:0})
    payload        
  decrement(state,payload){
    state.count =payload.count
  }
  •  mutation        （type    ）
 this.$store.commit({
   type:'changeCount'，
   count：100
 })

 Mutation          commit     payload  ,         
 changeCount(state,payload){
     state.count =payload.count
   }
  •  mutation     ：
 1. mutation ,            (          )
 2.    ,                    ,             ,       ,            ,            .

     ：
 1.          : mutation-types.js,             
 2.     ,       ES2015    ,               .

     ：
 mutation-types.js   
 export const UPDATE_INFO = 'UPDATE_INFO'

  vuex index.js   
   ：import * as types from './mutation-types'

   ：[UPDATE_INFO](state,payload){

 }

      
   ：import {UPDATE_INFO} from './store/mutation-types'
   ：    UPDATE_INFO
  • 非同期操作がある場合、mutationを使用しないでください.mutationを使用する場合、公式プラグインdevtoolsは非同期操作
    • を監視できないからです.
    actions
  • しかし、場合によっては、ネットワーク要求などの非同期動作をVuexで行うことを確実に望んでいるが、必然的に非同期である.この時はどうしますか?
  • のActionは、Mutationと同様であるが、Mutationの代わりに非同期動作を行うためのものである.

  •  mutation action  
 mutation:{
   increment(state){
     state.count++
   },
 action:{
   increment(context){
     context.commit('increment')
   }
 }
 }

 context   ?
 context  store              .    ,       context   commit     ,      context.state .

  Vue   ,       action    ,       dispatch (       payload    )
 methods：{
   increment(){
     this.$store.dispatch('increment',{count:5})
   }
 }

 mutations:{
   increment(state,payload){
     state.count += payload.count
   }
 }
 actions:{
   increment(context,payload){
     setTimeout(()=>{
       context.commit('increment',payload)
     },5000)
   }
 }
  •   Action ,              Promise ,           ,      resolve reject.
 actions:{
   increment(context){
     return new Promise((resolve)=>{
       setTimeout(()=>{
         context.commit('increment')
         resolve()
       },1000)
     })
   }
 }

 methods:{
   increment(){
     this.$store.dispatch('increment').then(res=>{
       console.log('       ')
     })
   }
 }
    midule 
  •  Vue       ,              Vuex   .
           ,store            .
         , Vuex     store     (Module),           state、mutations、actions、getters 

 const moduleA ={
   state:{...},
   mustation:{...},
   ....
 }

 const store =new Vuex.Store({
   modules:{
     a:moduleA
     b:moduleB
   }
 })
  • Moduleローカル状態
  • moduleAにstate、mutations、getters
    • を追加
  • mutationおよびgettersが受信最初のパラメータは、局所状態オブジェクト
    • である.
  • ただし、doubleCountとincrementはオブジェクトの内部に定義された
    • です.
  • しかし呼び出しの時、依然としてthis.$storeが直接呼び出す
  •  actions    ?     context    
        context.state     ，        context.rootState
 const moduleA ={
   //...
   actions:{
     incrementInfoRootSum({state,commit,rootState}){
       if((state.count + rootstate.count)%2 ==1 ){
         commit('increment')
       }
     }
   }
 }
  • 最後にstoreの各オブジェクトを各ファイルに抽出し、インポートに入り、最後に明確なプロジェクト構造
    • を完了する.
    USACO2.1 Sorting a Three-Valued Sequence (sort3)
    フロントエンド画像直伝アリOSS実現方法