vuex 数据在本地存储

前言：

vuex可以进行全局的状态管理，但刷新后数据会消失，在有些情况下我们更希望当我们刷新页面后数据依然存在，即实现数据在本地永久存储。

实现方法有二，一是借助插件，二是手动利用HTML5的本地存储，显然前者比较方便。

方法一：

利用vuex-persistedstate插件(默认存储到localStorage)

步骤：

（1）安装

npm install vuex-persistedstate  --save

（2） 在store.js中引入

import Vue from 'vue';
import Vuex from 'vuex';
//Add this line
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex);

export default new Vuex.Store({
  //Add this line
  plugins: [createPersistedState()],
  state: {
    lists: [],
  },
  mutations: {
    addItem(state,value){
      state.lists.push(value)
    },
  },
  actions: {

  },
});

方法二：

Vuex 中localStorage的使用

 

参考文章：1. localStorage的使用介绍

                  2. Vuex持久化插件-解决刷新数据消失的问题