狀態管理 vuex 介紹，vuex 頁面刷新數據丟失的解決辦法

目錄

• 狀態管理vuex簡介
• 狀態管理核心
  • 一、state
  • 二、getter
  • 三、mutation
  • 四、action
  • 五、module
• vuex 頁面刷新數據丟失的解決辦法

---

狀態管理vuex簡介

vuex 是專爲 vue.js 應用程序開發的狀態管理模式。它採用集中存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
vuex 也集成到 vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

狀態管理核心

狀態管理有 5 個核心，分別是 state、getter、mutation、action 以及 module。分別簡單的介紹一下它們：

一、state

state 爲單一狀態樹，在 state 中須要定義咱們所須要管理的數組、對象、字符串等等，只有在這裏定義了，在 vue.js 的組件中才能獲取你定義的這個對象的狀態。

二、getter

getter 有點相似 vue.js 的計算屬性，當咱們須要從 store 的 state 中派生出一些狀態，那麼咱們就須要使用 getter，getter 會接收 state 做爲第一個參數，
並且 getter 的返回值會根據它的依賴被緩存起來，只有 getter 中的依賴值（state 中的某個須要派生狀態的值）發生改變的時候纔會被從新計算。

三、mutation

更改 store 中 state 狀態的惟一方法就是提交 mutation，就很相似事件。每一個 mutation 都有一個字符串類型的事件類型和一個回調函數，咱們須要改變 state 的值就要在回調函數中改變。咱們要執行這個回調函數，那麼咱們須要執行一個相應的調用方法：store.commit。

四、action

action 能夠提交 mutation，在 action 中能夠執行 store.commit，並且 action 中能夠有任何的異步操做。在頁面中若是咱們要調用這個 action，則須要執行 store.dispatch

五、module

module 其實只是解決了當 state 中當代碼量很大很複雜、臃腫的時候，module 能夠將 store 分割成各個模塊，每一個模塊中擁有本身的 state、mutation、action 和 getter。

vuex 頁面刷新數據丟失的解決辦法

在 vue 項目中用 vuex 來作全局的狀態管理， 發現當刷新網頁後，保存在 vuex 實例 store 裏的數據會丟失。參考連接

緣由：

由於 store 裏的數據是保存在運行內存中的,當頁面刷新時，頁面會從新加載 vue 實例，store 裏面的數據就會被從新賦值初始化

解決思路：

將 state 的數據保存在 localstorage、sessionstorage 或 cookie 中（[三者的區別](https://stackoverflow.com/questions/19867599/> what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies)），這樣便可保證頁面刷新數據不丟失且易於讀取。

• 1.localStorage: localStorage 的生命週期是永久的，關閉頁面或瀏覽器以後 localStorage 中的數據也不會消失。localStorage 除非主動刪除數據，不然數據永遠不會消失。

• 2.sessionStorage:sessionStorage 的生命週期是在僅在當前會話下有效。sessionStorage 引入了一個「瀏覽器窗口」的概念，sessionStorage 是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即便刷新頁面或者進入同源另外一個頁面，數據依然存在。可是 sessionStorage 在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage 也是不同的。

• 3.cookie:cookie 生命期爲只在設置的 cookie 過時時間以前一直有效，即便窗口或瀏覽器關閉。 存放數據大小爲 4K 左右,有個數限制（各瀏覽器不一樣），通常不能超過 20 個。缺點是不能儲存大數據且不易讀取。

因爲 vue 是單頁面應用，操做都是在一個頁面跳轉路由，所以 sessionStorage 較爲合適,緣由以下：

• 1.sessionStorage 能夠保證打開頁面時 sessionStorage 的數據爲空；

• 2.每次打開頁面 localStorage 存儲着上一次打開頁面的數據，所以須要清空以前的數據。

vuex 中 state 數據的修改必須經過 mutation 方法進行修改，所以 mutation 修改 state 的同時須要修改 sessionstorage,問題卻是能夠解決可是感受很麻煩，state 中有不少數據，不少 mutation 修改 state 就要不少次 sessionstorage 進行修改，既然如此直接用 sessionstorage 解決不就好了，爲什麼還要用 vuex 畫蛇添足呢？ vuex 的數據在每次頁面刷新時丟失，是否能夠在頁面刷新前再將數據存儲到 sessionstorage 中呢，是能夠的，beforeunload 事件能夠在頁面刷新前觸發，可是在每一個頁面中監聽 beforeunload 事件感受也不太合適，那麼最好的監聽該事件的地方就在 app.vue 中。

• 在 app.vue 的 created 方法中讀取 sessionstorage 中的數據存儲在 store 中，此時用 vuex.store 的 replaceState 方法，替換 store 的根狀態

• 在 beforeunload 方法中將 store.state 存儲到 sessionstorage 中。

代碼以下：

export default {
    name: 'App',
    created() {
        //在頁面加載時讀取sessionStorage裏的狀態信息
        if (sessionStorage.getItem('store')) {
            this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
        }

        //在頁面刷新時將vuex裏的信息保存到sessionStorage裏
        window.addEventListener('beforeunload', () => {
            sessionStorage.setItem('store', JSON.stringify(this.$store.state))
        })
    },
}