面试 自承式光缆 java 线程池 unity 莱斯分布 url request Seajs 前端项目实战 jquery去掉空格 jquery去空格 jquery查找子元素 list获取最后一个元素 coreldraw学习 bootstrap颜色 php获取当天的0点时间戳 mysql 导入数据 mysql更新 python字典类型 python定义变量 python编程题 python的random模块 python写入txt文件 python创建文件 java覆盖 java语言 java接口调用 linux多线程编程 惠普战99 脚本学习 关闭页面 cmd命令数字雨 平面设计软件下载 女圣骑 视频旋转软件 js回调函数 小米开发者选项 ps描边怎么用 ps图层蒙版实例教程 shell数组遍历
当前位置: 首页 > 学习教程  > 编程语言

Vue-vuex简单使用和解决页面刷新state值清空的问题

2020/9/19 15:27:28 文章标签:

文章目录

    • 简单使用vuex
      • 1.建一个全局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;
        }
    }
})

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


本文链接: http://www.dtmao.cc/news_show_200253.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?