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對象轉(zhuǎn)化成字符串

localStorage.setItem("userInfo", JSON.stringify(res)) //只有用本地存儲頁面刷新的時候才不會被清掉

this.$store.commit("setPrint",{ // 這個使用的是mutations里面方法的調(diào)用

userInfo: res

})

this.$router.push("index");

}).catch(err => {

console.log(err)

})

store.js 建一個store文件夾把js放里面 在main.js 里面引入并全局注冊

main.js

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" // 設(shè)置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: ""

})

store.js

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

const state = {

userInfo: localStorage.getItem("userInfo") || {} //從緩存里面拿到的數(shù)據(jù)

};

const getters = {};

const actions = {};

const mutations = {

setPrint(state,userInfo){

state.userInfo = userInfo;

}

};

export default new Vuex.Store({

state,

getters,

actions,

mutations

})

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

export default {

name: "App",

data(){

return{

}

},

mounted(){

//在頁面加載時讀取localStorage里的狀態(tài)信息

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))

})

}

}

結(jié)語

vuex 存的是內(nèi)存 localStorage是瀏覽器提供的接口，讓你存的是接口，以文件的形式存儲到本地這是它們本質(zhì)的區(qū) 別

localStorage 保存對象的時候，需要先將對象轉(zhuǎn)換成json字符串，然后獲取的時候在轉(zhuǎn)換成對象形式

總結(jié)

以上是生活随笔為你收集整理的vuex 存储刷新_vuex 存储数据 页面刷新不缓存的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。