vuex 数据在本地存储
前言:vuex可以进行全局的状态管理,但刷新后数据会消失,在有些情况下我们更希望当我们刷新页面后数据依然存在,即实现数据在本地永久存储。实现方法有二,一是借助插件,二是手动利用HTML5的本地存储,显然前者比较方便。方法一:利用vuex-persistedstate插件(默认存储到localStorage)步骤:(1)安装npm install vuex-persis...
·
前言:
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: {
},
});
方法二:
参考文章:1. localStorage的使用介绍
更多推荐
已为社区贡献1条内容
所有评论(0)