vuex
Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
sessionStorage
譯為“會(huì)話存儲(chǔ)”，也是HTML5新增的一個(gè)存儲(chǔ)對(duì)象， 用于本地臨時(shí)存儲(chǔ)同一窗口的數(shù)據(jù)，在 關(guān)閉窗口之后 將會(huì)刪除這些數(shù)據(jù)，sessionStorage瀏覽器一般支持5M。
基本區(qū)別
vuex
- 儲(chǔ)存在內(nèi)存（內(nèi)存詳解）中
- 用于組件之間的傳值，可以存儲(chǔ)字符串、對(duì)象等類(lèi)型的數(shù)據(jù)
- 刷新頁(yè)面的時(shí)候，vuex存儲(chǔ)的值會(huì)丟失
sessionStorage
- 會(huì)話存儲(chǔ)，臨時(shí)保存
- 只能存儲(chǔ)字符串類(lèi)型，對(duì)象使用JSON.stringify方法轉(zhuǎn)換為字符串，涉及到數(shù)據(jù)轉(zhuǎn)化，
- sessionStorage的數(shù)據(jù)只能在一個(gè)標(biāo)簽內(nèi)，不同標(biāo)簽不共享。關(guān)閉窗口或者標(biāo)簽后會(huì)刪除數(shù)據(jù)
應(yīng)用場(chǎng)景
vuex：當(dāng)兩個(gè)組件共用一個(gè)數(shù)據(jù)源（對(duì)象或數(shù)組）時(shí)，如果其中一個(gè)組件改變了該數(shù)據(jù)源，希望另一個(gè)組件響應(yīng)該變化時(shí)，vuex把…mapState()放到computed中就可以實(shí)現(xiàn)。
sessionStorage：一般是用于不同的頁(yè)面之間的傳值。
直接上demo，當(dāng)對(duì)存儲(chǔ)數(shù)據(jù)進(jìn)行改變的時(shí)候，vuex定義的變量自動(dòng)更新，因?yàn)槭琼憫?yīng)式的，而本地存儲(chǔ)無(wú)法自動(dòng)更新，必須再次調(diào)用getItem方法才行文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-486714.html
<template>
<div class="page-wrapper">
<ul>
<li>store變量：{{ test1 }}</li>
<li>localStorage自動(dòng)：{{ test2 }}</li>
<li>localStorage手動(dòng)更新：{{ test3 }}</li>
<li>
<el-button @click="changeTest">修改全局test</el-button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "bTest",
data(){
return {
test3: ''
}
},
computed:{
test1(){
return this.$store.state.test
},
test2(){
return localStorage.getItem('test2')
}
},
created(){
this.test3 = localStorage.getItem('test3')
},
methods: {
changeTest(){
this.$store.commit("setText", 'A我是新值A(chǔ)AAAAA');
localStorage.setItem("test2", 'B我是新值BBBBBBB');
localStorage.setItem("test3", 'C我是新值CCCCCCCCC');
this.changeLocal()
},
changeLocal(){
this.test3 = localStorage.getItem('test3')
}
}
};
</script>
很多時(shí)候，為了解決刷新頁(yè)面，vuex公共變量變?yōu)槌跏贾档膯?wèn)題，一般會(huì)結(jié)合vuex和sessionStorage一起使用文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-486714.html
let mutations = {
setActiveIndex: (state, activeIndex) => {
state.activeIndex = activeIndex
sessionStorage.setItem('activeIndex', activeIndex)
},
setCertList: (state, CertListRe) => {
state.CertListRe = CertListRe
sessionStorage.setItem('CertListRe',CertListRe)
}
}
到了這里，關(guān)于為什么sessionStorage不能代替vuex的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
