菜单

js_脚本之家,vue项目悠久化存款和储蓄数据的落到实处代码_vue

2020年3月31日 - 澳门太阳娱乐手机登录

方式一、使用localStorage在数据存储

页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了。

js_脚本之家,vue项目悠久化存款和储蓄数据的落到实处代码_vue。1、要在浏览器刷新的时候重新存储起来

vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。

if (window.localStorage.getItem {store.commit(types.SETLOANNUMBER, window.localStorage.getItem;} 

vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。

方式二、使用vue-cookie插件来做存储

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据持久化,也可以通过插件-vuex-persistedstate。

npm install vue-cookie --save

1.手动利用HTML5的本地存储

3、在store中存储起来

vuex的state在localStorage或sessionStorage或其它存储方式中取值
在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。这样state就会和存储一起存在并且与vuex同步

import Vue from 'vue';import Vuex from 'vuex';Vue.usevar VueCookie = require;export default new Vuex.Store({state: { token: VueCookie.get},mutations: { saveToken { state.token = token; // 设置存储 VueCookie.set('token', token, { expires: '30s' }); }},actions: {}}) 

问题

4、在登录页面中设置到存储中

最直观的就是,手动写比较麻烦。

import { mapMutations } from 'vuex';export default {methods: { login() { this.saveToken }, ...mapMutations}}; 

2.利用vuex-persistedstate插件

方式三、使用vuex-persistedstate插件参考文件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

在做大型项目,很多数据需要存储的建议使用这种方式

npm install vuex-persistedstate --save

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

在store下的index.js中

import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({ // ... plugins: [createPersistedState

默认存储到localStorage

想要存储到sessionStorage,配置如下

import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage })]})

想使用cookie同理

默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage, reducer { return { // 只储存state中的assessmentData assessmentData: val.assessmentData } } })]

vuex引用多个插件的写法

譬如:vuex提示的插件和持久化的插件一起使用,配置如下

import createPersistedState from "vuex-persistedstate"import createLogger from 'vuex/dist/logger'// 判断环境 vuex提示生产环境中不使用const debug = process.env.NODE_ENV !== 'production'const createPersisted = createPersistedState({ storage: window.sessionStorage})export default new Vuex.Store({ // ... plugins: debug ? [createLogger(), createPersisted] : [createPersisted]})

plugins要是一个一维数组不然会解析错误

createPersistedState使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件:

key :存储持久状态的键。

paths
:部分持续状态的任何路径的数组。如果没有路径给出,完整的状态是持久的。

reducer
:一个函数,将被调用来减少基于给定的路径持久化的状态。默认包含这些值。

subscriber :一个被调用来设置突变订阅的函数。默认为store => handler
=> store.subscribe

storage :而不是getState和setState。默认为localStorage。

getState :将被调用以重新水化先前持久状态的函数。默认使用storage。

setState :将被调用来保持给定状态的函数。默认使用storage。

filter :将被调用来过滤将setState最终触发存储的任何突变的函数。默认为()
=> true

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图