<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-3-1      前端達人      
          
			
          
			
          
				
          vuex的基礎

          
1,狀態管理(共享)

          
緩存數據==>內存， 只要刷新頁面，數據就丟了

          
訂單，詳情等，，，不適用vuex緩存數據

          


          
用于

          


          
非父子通信的問題

          
緩存后端數據，提高用戶體驗

          
注意：

          
vuex只能有一個store,

          
為了防止多人修改，我們切割成子store, 再合并成唯一一個大的store對象

          
模塊寫法
          

          import Vue from 'vue'
import Vuex from 'vuex'
import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {

  }, // "全局"狀態
  mutations:{

  },//唯一修改狀態的地方
  //異步處理
  actions:{
  },
  // 對上面的“全局狀態”進行數據處理， 類似于vue中的計算屬性
  getters:{
  },

  modules:{
    cinema,
    tabbar
  }
})
export default store

          

          
    2,子模塊的寫法

          

          const module = {
  namespaced:true, //命名空間
  state :{
    cinemaList:[]
  },
  actions:{
    store.commit("setCinemaList",res.data.data.cinemas) //支持傳參
  },
  mutations:{
    setCinemaList(state,data){
      console.log("setCinemaList",data)
      state.cinemaList = data
    }
  },
  getters:{
    topDataList(state){
      //state形參s， vuex自動調用時候，傳來值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

          

          
    3,為了防止頁面刷新丟失數據,所以還得找到其他插件來幫忙

          

          import createPersistedState from "vuex-persistedstate"; //在index.js頁面加入這個插件

// 加入下面的代碼
const store = new Vuex.Store({
  plugins: [createPersistedState({
    reducer(val){
      return {
        user: val.user
      }
    }
  })]

          

          

          

          
    
          

          

          
    ————————————————
          
版權聲明：本文為CSDN博主「m0_46436313」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
          
原文鏈接：https://blog.csdn.net/m0_46436313/article/details/104572076
          

          				
          
								
			
          
		
          
		
		
	
          


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

          

          



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