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
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
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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.820esy.cn