頁面重新整理 vuex 資料重新被初始化

1、原因

vuex裡用來存儲的也隻是一個全局變量，當頁面重新整理，該全局變量自然不存在了。

2、解決

使用localStorage存儲一份

（1）storage.js

/**
 * vuex localStorage plugin
 */
const IS_ALL = 0

export default function storagePlugin({

  namespace = 'mfg-vux-',
  storage = localStorage,
  persistence = []
} = {}) {

  let serialize = JSON.stringify,
    deserialize = JSON.parse,
    isAll = persistence.length === IS_ALL

  /**
   * 擷取持久化的state
   * @param  {[type]} state [description]
   * @return {[type]}       [description]
   */
  function getState(state) {

    let data = {},
      keys = isAll ? Object.keys(state) : persistence,
      i = 0,
      len = keys.length

    for (; i < len; i  ) {

      let key = keys[i],
        value = deserialize(storage.getItem(namespace   key))

      data[key] = value === null ? state[key] : value
    }

    return data
  }

  /**
   * 持久化state
   * @param  {[type]} state [description]
   */
  function setState(state) {

    let keys = isAll ? Object.keys(state) : persistence,
      i = 0,
      len = keys.length

    for (; i < len; i  ) {

      let key = keys[i]

      storage.setItem(namespace   key, serialize(state[key]))
    }
  }

  return store => {

    let state = store.state

    // 初始化state
    store.replaceState(

      _.merge(

        {},
        state,
        getState(state)
      )
    )

    // 持久化state
    store.subscribe((mutation, state) => {

      setState(state)
    })
  }
}
           

（2）vuex部分代碼

import storage from './plugins/storage'
export default new Vuex.Store({

  state,
  mutations,
  getters,
  actions,
  plugins: [storage({

    // 要儲存的變量
    persistence: ['testText']
  })],
  strict: process.env.NODE_ENV !== 'production'
})
           

變量在localestorage中被儲存了：

更多專業前端知識，請上 【猿2048】www.mk2048.com