vuex数据持久化存储

vuex数据持久化存储

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中，需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法可。

Vuex 的状态存储并不能持久化。当存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

要解决这个问题，可用到vuex-persistedstate 插件，它就是用于 Vuex 持久化存储而。不需要手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。
安装：

npm install --save vuex-persistedstate

引入：

//store/index.js
import persistedState from 'vuex-persistedstate'


export default new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [persistedState()]

这样，比如在实现购物车模块功能时，加购的商品，不会因为一刷新就消失，而是会持久化存储。