Vue

2024-07-13 13:54| 来源: 网络整理| 查看: 265

文章目录简单使用vuex1.建一个全局store文件2.引入main.js中3.在页面中使用-保存值4.在页面总使用-获取值解决页面刷新state值清空的问题1.监听onload方法2.在store中拿缓存做赋值操作

简单使用vuex

我对vuex刚刚入门,但是项目中要使用vuex保存全局状态,所以在这里记录一下简单使用

1.建一个全局store文件

文件目录如下在这里插入图片描述里面的内容如下: 为什么要用一个sessionStorage.getItem(‘state’) 获取数据而不是直接初始化呢?后面有讲原因

//vuex全局 import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); const store = new Vuex.Store({ state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : { token: "", user: {} }, mutations: { //更改state值的方法集合 saveToken(state, data) { state.token = data; }, saveUser(state, data) { state.user = data; } } }) //存储时,使用commit this.$store.commit('mutatioins的方法',数据); //获取时,使用 this.$store.state.状态 //模块化,略... export default store; 2.引入main.js中 import Vue from 'vue'; import App from './App.vue'; //store文件和自己封装的storage文件 import store from './store'; import storage from "@/util/storage"; //全局引入本地缓存 Vue.prototype.$storage = storage; new Vue({ router, store, //使用store el: '#app', render: h => h(App) });

封装的storage,网上参考的

//本地缓存封装工具 /** * localStorage * @调用：_local.set('access_token', '123456', 5000); * @调用：_local.get('access_token'); */ var _local = { //存储,可设置过期时间 set(key, value, expires) { let params = { key, value, expires }; if (expires) { // 记录何时将值存入缓存，毫秒级 var data = Object.assign(params, { startTime: new Date().getTime() }); localStorage.setItem(key, JSON.stringify(data)); } else { if (Object.prototype.toString.call(value) == '[object Object]') { value = JSON.stringify(value); } if (Object.prototype.toString.call(value) == '[object Array]') { value = JSON.stringify(value); } localStorage.setItem(key, value); } }, //取出 get(key) { let item = localStorage.getItem(key); // 先将拿到的试着进行json转为对象的形式 try { item = JSON.parse(item); } catch (error) { // eslint-disable-next-line no-self-assign item = item; } // 如果有startTime的值，说明设置了失效时间 if (item && item.startTime) { let date = new Date().getTime(); // 如果大于就是过期了，如果小于或等于就还没过期 if (date - item.startTime > item.expires) { localStorage.removeItem(name); return false; } else { return item.value; } } else { return item; } }, // 删除 remove(key) { localStorage.removeItem(key); }, // 清除全部 clear() { localStorage.clear(); } } /** * sessionStorage */ var _session = { get: function(key) { var data = sessionStorage[key]; if (!data || data === "null") { return null; } return JSON.parse(data).value; }, set: function(key, value) { var data = { value: value } sessionStorage[key] = JSON.stringify(data); }, // 删除 remove(key) { sessionStorage.removeItem(key); }, // 清除全部 clear() { sessionStorage.clear(); } } export default { _local, _session } 3.在页面中使用-保存值

比如我现在是一个登陆接口,登陆成功的时候要保存数据在vuex中

this.$store.commit("saveToken", data.token); //存token this.$store.commit("saveUser", data.user); //存token 4.在页面总使用-获取值

直接使用this.$store.state.state值拿对应的数据

this.$store.state.token; 解决页面刷新state值清空的问题

这是我参考了网上的资料应用到项目中去的,发现还是有坑,无论我怎么值,它刷新之后还是在state还是为空,然后我在监听onload的时候,投机取巧地先保存一下状态值到state值中,再存state大对象到缓存,竟然成功了,很迷…不知道原理

1.监听onload方法

在这里插入图片描述注意sessionStorage不能存对象,所以要转成String类型

mounted() { window.addEventListener("unload", this.saveState()); }, methods: { saveState() { this.$store.commit("saveToken", this.$storage._session.get('token')); //存token this.$store.commit("saveUser", this.$storage._session.get('user')); //存token sessionStorage.setItem("state", JSON.stringify(this.$store.state)); console.log('嘤嘤嘤',this.$store.state); }, }, }; 2.在store中拿缓存做赋值操作 const store = new Vuex.Store({ state: sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : { token: "", user: {} }, mutations: { //更改state值的方法集合 saveToken(state, data) { state.token = data; }, saveUser(state, data) { state.user = data; } } })

踩了这些坑,跨过这些坎,你就是大牛啦~

【本文地址】

Vue

Vue

今日新闻

推荐新闻