2020-3-1 前端達(dá)人
vuex的基礎(chǔ)
1,狀態(tài)管理(共享)
緩存數(shù)據(jù)==>內(nèi)存， 只要刷新頁面，數(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í)候，傳來值
return state.cinemaList.slice(0,5)
}
}
}
export default module
import createPersistedState from "vuex-persistedstate"; //在index.js頁面加入這個(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://www.alimai.net