About

请大家看到题目后不要误解，本文提出的观点是在某些场景下使用sessionStorage或者localStorage可能比vuex更好。

注：本文不会介绍localStorage和sessionStorage、cookie以及vuex的具体别，只分享一次项目经历

使用sessionStorage替代vuex

一、项目背景描述

一个页面的数据需要从首页发送ajax获取，因为数据量较为庞大，所以我们可以采用除cookie以外的其他方式进行存储，但是因为这些数据可能会经常面临更新，所以每次登录网站时都必须要重新获取一遍数据，所以不采用localStorage，我们就只剩下两种方式了。

二、通过vuex存储数据

我们可以在获取到json数据后通过commit一个mutation去将数据存放在事先定义好的state中，然后在需要该数据的页面中直接从store中去取，但是这样会造成一些预期外的影响，如图所示：

数据丢失.gif
可以看到从首页进入到地址选择页面时，该页面能正常显示，但是刷新后，页面中的数据就丢失了，是因为，我们将地址列表存储在vuex中，而刷新会清空vuex，如图所示：

清空vuex.gif
刚开始我们的state中存有数据，但是刷新后，所有的数据都清空了，所以页面就不能正常显示了。

三、使用sessionStorage存储数据

我们在首页中把拿到的数据存储在sessionStorage中，只要网页没有被关闭，这些数据就能一直保存，代码如下：

  getCityInfo () {
      axios.get('/api/city.json').then(this.createCityList)
    },
  createCityList (res) {
    const {code, data} = res.data
      if (code) {
        sessionStorage.setItem('inHotList', JSON.stringify(data.hotCities))
        sessionStorage.setItem('outHotList', JSON.stringify(data.hotList))
        sessionStorage.setItem('allCities', JSON.stringify(data.cities))
      }
  }

这样，即使我们刷新网页，数据也不会丢失，效果如图：