<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          vuex管理狀態倉庫詳解
          
				
           2020-7-22      seo達人      
          
			
          
			
          
				
          
    一.什么是Vuex？

          

          
    Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。采用了全局單例模式，將組件的共享狀態抽離出來管理，使得組件樹中每一個位置都可以獲取共享的狀態或者觸發行為。
          
那么什么是狀態呢？我把狀態理解為在沒有使用vuex時，在當前組件中data內需要共用的數據為狀態。
          
vuex使得狀態或行為成為了共享的狀態，所共享的狀態或行為可以在各個組件中都可以訪問到，省去了子父或子子之間傳遞變量，提高了開發效率。

          

          
    二.不使用vuex時與使用vuex時的差別

          

          
    當我們不使用vuex時，對于組件之間傳遞信息會較為麻煩。

          

          
    不使用vuex時

          

          
    父子之間傳遞信息：

          

          
    App.vue文件中：

          

          <template>
  <div id="app">
      <Fruits :fruitList="fruitList"/>
  </div>
</template> 
<script> import Goods from './components/Goods'; export default { name: 'App',
  components:{
    Fruits,
    Goods
  }, data(){
    return{ goodList:[
      {
        name:'doll',
        price:12 },
      { name:'glass',
        price:10 }
    ],
    }
  }
}
</script>
<style>
</style>
          

          
    Good.vue文件中：

          

          <template>
  <div class="hello">
      <ul>
        <li v-for="(good,index) in goodList" :key="index"> name:{{good.name}} number: {{good.number}} {{index}}
        </li>
      </ul>
  </div>
</template>

<script> export default { props:['goodList'],
}
</script>
<style>

</style>
          

          
    兄弟之間傳遞信息：

          

          
    首先先創建一個js文件作為兩兄弟之間傳輸的紐扣，這里起名為msg.js

          

          //創建并暴露vue import Vue from 'vue';
export default new Vue
          

          
    兄弟組件Goods：

          

          <template>
  <div>
        <button @click="deliver">點擊</button>
  </div>
</template>

<script> import MSG from '../msg';
export default {
  data(){ return{
      msg:'hahah' }
  },
  methods:{
    deliver() {
        MSG.$emit('showMsg',this.msg)
    }
  }

}
</script>
<style>

</style>
          

          
    兄弟組件Fruits:

          

          <template>
  <div>
      <div class="fruit">
          {{text}}
      </div>
  </div>
</template>
<script> import MSG from '../msg';
export default {
    data(){ return{
        text:'' }
    },
    created(){ this.getMsg()
    },
    methods:{
      getMsg(){
        MSG.$on('showMsg',(message)=>{ this.text = message
        })
      }
    }
}
</script>
<style>
</style>
          

          
    在App組件中的代碼：
          
在這里插入圖片描述
          
點擊按鈕:

          

          
    
          
          

          

          藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合