Vuex的一些用法

2020-3-1    前端達(dá)人

vuex的基礎(chǔ)

1,狀態(tài)管理(共享)

緩存數(shù)據(jù)==>內(nèi)存， 只要刷新頁(yè)面，數(shù)據(jù)就丟了

訂單，詳情等，，，不適用vuex緩存數(shù)據(jù)



用于



非父子通信的問題

緩存后端數(shù)據(jù)，提高用戶體驗(yàn)

注意：

vuex只能有一個(gè)store,

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

模塊寫法

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: {

  }, // "全局"狀態(tài)
  mutations:{

  },//唯一修改狀態(tài)的地方
  //異步處理
  actions:{
  },
  // 對(duì)上面的“全局狀態(tài)”進(jìn)行數(shù)據(jù)處理， 類似于vue中的計(jì)算屬性
  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自動(dòng)調(diào)用時(shí)候，傳來(lái)值
      return state.cinemaList.slice(0,5)
    }
  }
}

export default module

3,為了防止頁(yè)面刷新丟失數(shù)據(jù),所以還得找到其他插件來(lái)幫忙 

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

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


————————————————
版權(quán)聲明：本文為CSDN博主「m0_46436313」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m0_46436313/article/details/104572076

分享本文至：

日歷

鏈接

個(gè)人資料

存檔