Vuejs教程目录:

  1. 从Demo到实例快速上手Vue.js
  2. Vuejs网络请求组件的使用及解决跨域问题
  3. vuejs单文件应用入门
  4. Vue.js单文件项目中使用Vuex:装载工具
  5. Vue.js单文件项目中使用Vuex:数据操作

经过之前两篇的介绍,基本上我们队Vuex的基础用法已经有了一定的了解。但是在Vuex的使用过程中,经常性地遇到像页面刷新导致数据丢失的问题,就像我们在用Memcached一样——一重启,所有的缓存全部丢失,这就很尴尬了。所以我们需要有一个比较完善的数据持久化方案。
在Vuex支持第三方中间件扩展的基础上,我们发现一个非常好用的插件。所以,这篇只是一个扩充说明,会比较短。
这个插件就是vuex-persistedstate 点击这里看它的NPM主页
这个插件的用法也非常简单
首先进行安装

cnpm install vuex-persistedstate -S

然后在store.js文件进行引入和实例化

import VuexPersistence from 'vuex-persistedstate'
const vuexLocal = new VuexPersistence({
    storage: window.localStorage
});

在这里我是使用localstorage进行持久化存储,这里你还有可以换成window.sessionStorage等其他存储方式,具体你可以查看文档。
接下来在Vuex里面进行插件挂载。

export default new Vuex.Store({
  state,
  mutations,
  getters,
  plugins: [vuexLocal]
});

接下来我们什么也不用改了,直接把项目跑起来吧。
如果你知道浏览器的localStorage是在哪看的话你就能看到数据的每次修改都会被存储到localStorage里面了。
到此,你对Vuex的基础使用已经完全了解了。
再深入我也不会了,还是看官方文档吧。