• element ui框架(vuex3使用)


    【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】

            前面我们使用了sessionStorage实现了登陆状态的保存。但是sessionStorage保存的数据是有限的,如果希望实现vue不同组件之间的数据共享,可以使用vuex来实现。目前和vue2比较match的vuex是vuex3,这一点需要注意下。

    1、安装vuex3

    npm install vuex@3 --save-dev

    2、在main.js中添加vuex

    1. import Vuex from 'vuex'
    2. Vue.use(Vuex)

    3、创建一个store目录,准备index.js文件

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    3. Vue.use(Vuex)
    4. const state = {
    5. user:{
    6. name:''
    7. }
    8. };
    9. const getters = {
    10. getUser(state) {
    11. return state.user;
    12. }
    13. };
    14. const mutations = {
    15. updateUser(state,user){
    16. state.user = user;
    17. }
    18. };
    19. const actions = {
    20. asyncUpdateUser(context, user){
    21. context.commit("updateUser", user);
    22. }
    23. };
    24. export default new Vuex.Store({
    25. state,
    26. getters,
    27. mutations,
    28. actions
    29. })

    4、在main.js中加入刚刚创建的store对象

    1. import store from './store'
    2. /* eslint-disable no-new */
    3. new Vue({
    4. el: '#app',
    5. router,
    6. store,
    7. components: { App },
    8. template: '',
    9. render:h=>h(App)
    10. })

    5、在submitForm中增加代码

    this.$store.dispatch("asyncUpdateUser", {name:this.form.name});

    6、在Main.vue中修改span中的显示方法

    <span>{{$store.getters.getUser.name}}span>

    7、测试验证

            在没有添加vuex之前,登录到Main页面之后。如果继续点击/MemberLevel,或者是/MemberList,就会出现用户丢失的情况。现在有了vuex,这种现象不会出现了。

    8、继续解决页面刷新后,用户信息丢失的问题

            要解决这个问题,需要有两个地方做出修改,一个是在Main.vue中添加页面刷新回调,保证页面刷新前数据保存到sessionStorage;另外一个就是store的index.js做出修改,主要是state的初始化。

    8.1 Main.vue添加回调函数

    1. export default {
    2. name: "Main",
    3. mounted() {
    4. window.addEventListener('unload', this.saveState())
    5. },
    6. methods: {
    7. saveState() {
    8. console.log(JSON.stringify(this.$store.state));
    9. sessionStorage.setItem('state', JSON.stringify(this.$store.state));
    10. }
    11. }
    12. }

    8.2 修改store/index.js中state的初始化函数

    1. const state = sessionStorage.getItem('state')?JSON.parse(sessionStorage.getItem('state')):{
    2. user:{
    3. name:''
    4. }
    5. };

            有了8.1和8.2这两部分,基本就可以解决页面F5刷新后,用户信息丢失的问题。

    9、针对前一篇登录状态保留中的作弊问题,因为有了store数据,这里其实也可以一并修改了,

    1. router.beforeEach((to,from,next)=>{
    2. let isLogin = sessionStorage.getItem('isLogin')
    3. if(to.path=='/Logout'){
    4. sessionStorage.clear()
    5. next({path:"/Login"})
    6. }
    7. else if(to.path == '/Login') {
    8. if(isLogin != null) {
    9. next({path:('/Main/'+store.getters.getUser.name)}) // 修改一处
    10. }
    11. }
    12. else if(to.path == '/') {
    13. if(isLogin != null) {
    14. next({path:('/Main/'+store.getters.getUser.name)}) // 修改二处
    15. }
    16. else{
    17. next({path:'/Login'})
    18. }
    19. }
    20. else if(isLogin == null){
    21. next({path:'/Login'})
    22. }
    23. next();
    24. })

  • 相关阅读:
    Windows上安装jdk17后没有jre的解决方法
    【Java】JDBC基础使用教程
    Android FileProvider笔记
    端到端图像压缩《Checkerboard Context Model for Efficient Learned Image Compression》
    动态规划-构建乘积数组
    Laravel 博客开发|后台项目管理
    ps2024滤镜插件Portraiture
    基于矩阵分解模型的协同过滤理论概述(涉及到SVD,SVD++,TimeSVD++)
    cocosCreator 之 Toggle和ToggleContainer复选框的使用和拓展
    【毕业设计】Spark海量新闻文本聚类(文本分类)
  • 原文地址:https://blog.csdn.net/feixiaoxing/article/details/126924226