页面刷新 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