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