vuex 存储数据,页面刷新不缓存入门基础知识_刷新小白攻略

html login.vue 这是登录需要储存的this.$httpPostService(‘/member/user/doLogin’, {username: that.userName,password: that.userPassword,code: that.verCode
}).then(res => {console.log(res);//JSO

vuex 存储数据,页面刷新不缓存入门基础知识

html login.vue 这是登录需要储存的

this.$httpPostService('/member/user/doLogin', {
	username: that.userName,
	password: that.userPassword,
	code: that.verCode
}).then(res => {
	console.log(res);
	//JSON.stringify是把json对象转化成字符串
	localStorage.setItem("userInfo", JSON.stringify(res)) //只有用本地存储页面刷新的时候才不会被清掉
	this.$store.commit("setPrint", { // 这个使用的是mutations里面方法的调用
		userInfo: res
	})

	this.$router.push("index");
}).catch(err => {
	console.log(err)
})

store.js 建一个store文件夹把js放里面 在main.js 里面引入并全局注册

main.js

vuex 存储数据,页面刷新不缓存入门基础知识_刷新小白攻略

import Vue from 'vue'
import App from './App'
import router from './router'

import { httpPostService, httpGetService } from "./network/axios";
Vue.prototype.$httpPostService = httpPostService;
Vue.prototype.$httpGetService = httpGetService;
import store from './store/store' //这是引入的

import vueTitle from 'vue-wechat-title' // 设置title
Vue.use(vueTitle)

import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';
import './assets/less/common.less'
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	store,
	components: {
		App
	},
	template: '<App/>'
})

store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state = {
	userInfo: localStorage.getItem('userInfo') || {} //从缓存里面拿到的数据
};
const getters = {};

const actions = {};

const mutations = {
	setPrint(state, userInfo) {
		state.userInfo = userInfo;
	}

};

export default new Vuex.Store({
	state,
	getters,
	actions,
	mutations
})

全局注册 需要在app.vue里面

<template>
	<div id="app">
		<router-view/>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {

			}
		},
		mounted() {
			//在页面加载时读取localStorage里的状态信息
			localStorage.getItem("userInfo") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem("userInfo"))));

			//在页面刷新时将vuex里的信息保存到localStorage里
			window.addEventListener("beforeunload", () => {
				localStorage.setItem("userInfo", JSON.stringify(this.$store.state))
			})
		}
	}
</script>

结语

vuex 存的是内存 localStorage是浏览器提供的接口,让你存的是接口,以文件的形式存储到本地这是它们本质的区别 

localStorage 保存对象的时候,需要先将对象转换成json字符串,然后获取的时候在转换成对象形式

海计划公众号
(0)
上一篇 2020/03/23 18:38
下一篇 2020/03/23 18:38

您可能感兴趣的内容

  • 深入研究Js全局变量基础知识_变量基础入门

    本文的内容比较硬核,我们一起来看下 JavaScript 全局变量的底层机制到底是怎样的。文章会涉及脚本作用域、全局对象等概念。作用域变量的 词法作用域 (简称 作用域 )是程序中可以访问它的区域。JavaScript 的作用域是静态的(在运行时不会改变),并可以嵌套——例如:function func() { // (A)const aVariable =

    2020/03/23
  • JS中==、===你分清楚了吗?零基础入门_运算入门教程

    ==、===都是相等运算符,这个大家应该都知道,但二者有什么区别呢?其实==是相等,===是严格相等,那他们有什么本质的区别呢?下面我就给大家细细道来。==相等比较两个值的时候,有两种情况,一种如果两个值的类型相同,就直接比较;另一种如果两个值得类型不同,则会尝试改变为相同的类型在进行比较第一种很好理解,直接比较完事儿,第二种就更有趣一些,它到底是怎么转换的

    2020/03/24
  • 网站的SEO页面的要求,你做对了吗?入门教程_seo菜鸟教程

    在做网站优化中很多人对于页面不太重视,觉得只要搞好整体的布局优化和关键词密度就行了,对于网站文章内页不太重视,这样想就错了,其实顾客看的最多的还是你的文章内页,这个页面不光要美观,元素还要足够多。接下来我说一下在SEO优化中,网站文章内页的一些要求。1.文章标题,一篇文章的标题,需要用h1标签。2.页面tdk,文章标题、关键词和描述。3.自动锚文本或手动,相

    2020/03/26
  • Jira零基础入门_Jira和confluence俗称的pms,项目及工作任务管理

    Jira基础教程 官方网址:https://www.atlassian.com/ 简介描述:Jira和confluence俗称的pms,项目及工作任务管理 Millions of …

    2020/03/06
  • CSS 渲染原理以及优化策略基础入门_渲染入门基础

    提起 CSS 很多童鞋都很不屑,尤其是看到 RedMonk 2019 Programming Language Rankings 的时候,CSS 竟然排到了第七位。我们先来看看这张排行榜:从上面可以看出,CSS 的地位已经今非昔比了。本节我们就来说说 CSS 渲染以及优化 相关的内容,主要围绕以下几点,由浅入深,了解来龙去脉:1.浏览器构成2.渲染引擎3.C

    2020/03/23
  • 网站建设时要注意新广告法违反后将遭到重罚?使用说明_广告小白攻略

    随着2019年新广告法的推出,在网站宣传时一定要注意避免违禁词,网建科技小编最近接到几次客户因为网站中含有“最”“销量第一”等极端宣传字样被工商局开罚单事件。好像数额都不小从几万至几十万都有。网站建设中的几个重要部位不要出现违禁词,第一网站标题中不能含有违禁词,第二网站首页以及内页中不能含有违禁关键词,新闻内容中宣传自己的产品或服务时不要含违禁词,网站设计图

    Web前端 2020/03/23
  • 面向对象三大特征(封装,继承,多态)小白基础_面向对象小白攻略

    面向对象的三大特征:1.封装: 把功能封装到对象中,外部只需要调用,无需关心内部实现2.继承: 一个对象拥有另一个对象的所有的成员3.多态: 同一个对象在不同情况下的多种状态1.封装*代码封装可以避免代码冗余,避免去哪聚变量污染,本质就是把公共的代码抽离出来在需要的地方随时调用在继承中也有体现2.多态同一个对象在不同的情况下的多种状态 fun

    2020/03/20
  • CssMatic菜鸟教程在线CSS网页设计工具

    CssMatic入门指南 官方网址:https://www.cssmatic.com/ 简介描述:在线CSS网页设计工具 在线CSS网页设计工具是一个非营利性的网站设计师在线开发工…

    2020/03/06
  • javascript如何判断鼠标是否在div区域内?使用说明_鼠标使用帮助

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。方法一:通过mouseover、mouseout事件,来判断鼠标是否在div区域。 但是

    2020/03/24
  • js中,数组如何去重?基础指南_数组指南攻略

    关于如何去除一个给定数组中的重复项,应该是 Javascript 面试中最常见的一个问题了,最常见的方式有三种: Set 、 Array.filter 以及 Array.reduce ,对于只有简单数据的数组来讲,我最喜欢 Set ,没别的,就是写起来简单。const originalArray = [1, 2, ‘咩’, 1, ‘Super Ball’,

    2020/03/26
  • 印象笔记入门百科_工作必备效率应用

    印象笔记入门百科 官方网址:https://www.yinxiang.com/ 简介描述:工作必备效率应用 在你的手机和电脑上,使用印象笔记来捕捉、培养和共享灵感。跨平台的印象笔记…

    2020/03/06
  • javascript中object是什么?零基础入门_object小白知识

    object是javascript中一个被我们经常使用的数据类型,而且JS中的所有对象都是继承自Object对象的。下面本篇文章就来给大家简单介绍一下javascript中的Object类型,希望对大家有所帮助。Object类型ECMAScript中的对象其实就是一组数据和功能的集合。通过new操作符后跟要创建的对象类型的名称来创建。//创建一个Object

    2020/03/22
  • timeago.js小白攻略_用于格式化日期显示的js插件

    timeago.js小白攻略 官方网址:https://timeago.org GitHub:https://github.com/hustcc/timeago.js 简介描述:用…

    2020/03/06
  • Js代码中的span拼接基础指南_代码教程视频

    今天遇到一个小需求,用bootstrap的table只有两个字段,占用太宽,页面不美观,组长要求用拼接,一行几列的形式展现出来。我在form表单中拼接了span,遇到以下问题:1.点击查询,以前生成的span不消失,新的拼接在后面2.span中的复选框,值的取出,复选框的状态更换对于职场老手来说,这没什么,但是js代码没接触多久的我来说,只能撞墙寻出口,边撞

    2020/03/26
  • 如何使用SVG动画来制作游戏基础入门_游戏基础知识入门

    在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有许多细致的动画细节。有一天夜里,我的脑海中突然闪现了一个游戏的灵感,我马上起来,画了一些草图,之后给我的

    2020/04/03
  • 如何让你的 JS 写得更漂亮?小白攻略_优化基础指南

    网上有不少关于JS编写优化建议,这里我根据自己的经验提出一些比较有用的意见。
    1. 按强类型风格写代码
    JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:
    var num, str, obj;
    声明了三个变量,但其实没什么用,因为解释器不知道它们是什么类型的,好的写法应该是这样的:
    var num =

    2020/03/24