Vue中使用vuex在頁面重新整理之後狀態不丟失的解決方法
const store = new Vuex.Store({ // 定義狀態
myInfo: JSON.parse(localStorage.getItem("myInfo")) || {}, //這裡使用JSON.parse是因為我localStorage中儲存的是一個物件字串 },
//修改狀態 mutations:{
setInfo(state,info){
localStorage.setItem('myInfo', JSON.stringify(info));
//將傳遞的資料先儲存到localStorage中state.myInfo = info;// 之後才是修改state中的狀態
},
}, }) export default store
把它放到localStorage裡面就可以啦。但是要注意退出登入時清除localStorage.setItem("myInfo","")。下一次來的時候重新覆蓋。
相關推薦
Vue中使用vuex在頁面重新整理之後狀態不丟失的解決方法
const store = new Vuex.Store({ // 定義狀態 myInfo: JSON.parse(localStorage.getItem("myInfo")) || {}, //這裡
JS頁面重新整理保持資料不丟失
下面是 DOM Storage 的介面定義: interface Storage { readonly attribute unsigned long length; getter DOMString key(in unsigned long index)
vue-cli 打包後背景圖出不來解決方法
vue-cli用npm run build打包之後,開啟index.html頁面,背景沒有加載出來解決辦法: 修改build/utils.js檔案裡面的ExtractTextPlugin,新增:publicPath: ‘…/…/’, 具體程式碼如下: if (options.extrac
大檔案上傳,修改php.ini的配置之後仍不生效解決方法
今天把程式放到服務上(LAMP環境)之後,發現大檔案上傳又不生效了,第一想到的方案就是修改新安裝環境的php.ini配置,修改大體分為兩步: 1、修改上傳大小限制 file_uploads = On upload_max_filesize = 50M post_max_s
vue專案中,頁面重新整理回到頁面頂部的方法
在Vue專案中,訪問過的頁面,在滾動到某個位置後,再次重新整理頁面,頁面仍處於上次訪問過的位置。為了想頁面回到頂部,只需要對路由進行修改,在router下index.js中:export default new Router({ routes: [{...}], sc
總結VUE幾種頁面重新整理方法
有時候在頁面裡做了某些操作以後,需要頁面重新整理一下來重新獲取資料。試了幾種方法,以下總結: 1、this.$router.go(0) 這種方法頁面會一瞬間的白屏,體驗不是很好,雖然只是一行程式碼的事 2、location.reload() 這種也是一樣,畫面一閃,效果總不是很好
vue 路由許可權 頁面重新整理時報404問題
開始的時候我是這麼寫的 、 這個時候重新整理頁面 已經配置好的路由 頁面莫名其妙跑到404了 鬧心啊 各種debugger都不好使 然後問了一下群 大佬說 這個404 不能寫到路由 要 在addrouter裡進行拼接404這個路由 然後我就 把這
Vue中的checkbox全選全不選的實現
全選功能可以說是前端開發中非常常見的一個功能,以前的專案開發用jQuery開發比較多。最近在使用vue前端框架重構之前的專案。從jQuery到vue的轉變主要是一個思想想的轉變,是將原有的直接操作dom的思想轉變到操作資料,用資料驅動dom,也是vue框架的一個核心思想,
Vue中切換頁面時的過渡動畫
定義層級 我們需要給各個頁面定義層級,在切換路由時判斷使用者是進入哪一層頁面,如果使用者進入更高層級那麼做前進動畫,如果使用者退到低層級那麼做後退動畫。 import Vue from 'vue'; import Router from 'vue-router'; import Ho
vue-列印當前頁面為pdf檔案(不分頁----一頁)
1、npm 安裝 npm install jspdf --save npm install --save html2canvas 2、在需要列印的頁面匯入 import html2Canvas from “html2canvas”; import JsPDF from “jspdf”; 3、
vue中npm run dev執行專案不能自動開啟瀏覽器!
上個專案結束就很久沒有使用vue了,最近打算用vue搭建自己的個人站點就準備先建立專案。 然後就出現了一系列問題,可能是很久沒用吧,太生疏了,之前又不小心把環境變數刪除了,結果各種不是內部或外部命令。 這裡要說的問題就是一個讓我很不爽的問題: I Your appl
iframe框架中的頁面重新整理
1,reload 方法,該方法強迫瀏覽器重新整理當前頁面。 語法:location.reload([bForceGet]) 引數: bForceGet, 可選引數, 預設為 false,從客戶端快取裡取當前頁。true, 則以 GET 方式,從服務端取最新的
Myeclipse中jsp頁面連結css檔案不生效問題
jsp頁面在外鏈css檔案後,樣式表不生效,查了很多方法,都說是路徑問題改了很多次也不行。 例如改為: <link rel="stylesheet" href="<%=bas
Vuex 頁面重新整理後store儲存的資料會丟失 取cookie值
在store.js中 mutations:{ changepcId(state, _pcid){ state.pcid = _pcid; }, changepostList(state, _postList){
vue中單頁面應用頁面跳轉
vue中單頁面應用頁面跳轉 <router-link :to="{ path: '/map'}"> <el-button type="success" @click="deployStation">批量部署基站</el-button></ro
vue v-for的陣列改變導致頁面不渲染解決方法
直接在數組裡,改變陣列來達到重新渲染頁面的目的, 需要用push等陣列方法, 或者$set(),或者給陣列重新賦值,來改變陣列引用地址 而是直接索引= <body> <div id="app"> <li v-for='item in student
每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法
1. 在main.js入口檔案中寫入 //路由跳轉後,頁面回到頂部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位
每天一點點之vue框架開發 - vue中使用vue-router切換頁面時自動滾動到頂部的方法
tps base 切換 pre info llb col 技術 scrolltop 1. 在main.js入口文件中寫入 //路由跳轉後,頁面回到頂部 router.afterEach(() => { document.body.scrollTop = 0;
vue中vuex資料持久化
vuex資料持久化,vuex-persist 第一步,安裝vuex-persist npm install -S vuex-persist 第二步,在store檔案中引用 import Vue from 'vue' import Vuex from 'vuex'
百度地圖api在Html中顯示,在jsp頁面中不顯示解決方法
在jsp頁面中顯示如下但是在html中正常顯示。原來的程式碼如下<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true">&