精华内容
下载资源
问答
  • vuex本地存储

    2020-11-11 20:34:52
    vuex使用存储 安装vuex存储的插件 npm install --save vuex-persistedstate 安装完成以后,在store里面的index.js中 import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ ...

    vuex使用存储

    安装vuex存储的插件

    npm install --save vuex-persistedstate
    

    安装完成以后,在store里面的index.js中

    import createPersistedState from "vuex-persistedstate"
    
    const store = new Vuex.Store({
      plugins: [createPersistedState()],//加上这句代码
      state: {
        count: 0,
      },
      mutations: {
        increment (state) {
          state.count++
        },
      },
      getters:{
      
      },
    
    })
    export default store;
    

    即可完成vuex的本地存储,是不是超级无敌巨方便?

    展开全文
  • 结合vuex本地存储state全局变量值(避免页面刷新数据丢失) 问题描述: 通过接口获取的数据进行变量接收后,如果刷新页面,需要重新进行接口请求,这样有时候会造成需要渲染的数据丢失。解决方法如下: 1、store中定义...

    结合vuex本地存储state全局变量值(避免页面刷新数据丢失)

    问题描述:
    通过接口获取的数据进行变量接收后,如果刷新页面,需要重新进行接口请求,这样有时候会造成需要渲染的数据丢失。解决方法如下:
    1、store中定义全局变量:

    import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      state: {
        /*定义组件间通信变量*/
        dayEvents:[],
        dayTaskShow:false,
        calendarOneDay:'',
    
        signPeopleName:'',//当前签到人姓名
        signSuccessManPic:'',//当前签到人成功照片
        signTime:'',//签到时间
    
        mapShow:true,//map地图展示
        bimShow:false,//BIM模型展示
    
        goHomeColor:false,
        goDeviceStatusColor:false,
        goWorkTaskColor:false,
        goOperationsSinInRecordColor:false,
        goSpecificationRequirementsColor:false,
      },
      mutations: {},
      actions: {},
      modules: {}
    });
    
    

    2、对全局变量进行watch监听:我这里需要监听的变量是signPeopleName和signSuccessManPic以及signTime,具体根据你的需求来就行。
    注:watch与methods方法区同级

    watch:{
                "$store.state.signPeopleName":function (val,old) {
                    console.log(val)
                },
                "$store.state.signSuccessManPic":function (val,old) {
                    console.log(val)
                },
                "$store.state.signTime":function (val,old) {
                    console.log(val)
                },
            },
    

    3、生命周期created里面进行本地sessionStorage变量值存储:

    // 页面载入时本地存储中有 state 则用本地state赋值到 vuex 中的 state
                sessionStorage.getItem('state') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('state'))));
                //进行页面刷新时存储 store.state 数据存储到sessionStorage中
                window.addEventListener('beforeunload', () => {
                    sessionStorage.setItem('state',JSON.stringify(this.$store.state));
                })
    

    4、这样在刷新页面的时候,接口请求到的数据就可以被存储起来,避免了数据丢失的问题。
    美滋滋!!!

    展开全文
  • npm install vuex-persistedstate --save 2- 在store内 引入插件 import createPersistedState from "vuex-persistedstate" 3-使用插件 const store = new Vuex.Store({ //使用插件 plugins: ...

    1-下载插件

    npm install vuex-persistedstate  --save
    

    2- 在store内 引入插件

    import createPersistedState from "vuex-persistedstate"
    

    3-使用插件

    const store = new Vuex.Store({
    	//使用插件
        plugins: [createPersistedState()],
        //vuex数据
        state:{
            // 总商品列表
            goodsList:[],
            //详情页列表
            cartList:[],
        },
        mutations:{
            // 主页点击加入购物车
            addGoods(state,val){
                state.goodsList= val
                // console.log( state.goodsList);
            },
            // 详情页
            addCartGoods(state,val){
                state.cartList = val;
            },
            //删除
            del(state,index){
                state.goodsList.splice(index,1)
            }
    
        }
    }
    
    

    4-说明
    数据默认保存到LocalStorage中
    localstorage

    展开全文
  • 1.在store目录下创建state.js文件,用于存储state数据以及和本地存储整合 //声明一个默认的token let defaultToken = "null" if(localStorage.token){ // 判断localStorage是否存在该值 //声明一个默认的token ...

    当state的值发生更改时怎么去处理

    1.在store目录下创建state.js文件,用于存储state数据以及和本地存储整合

    //声明一个默认的token
    let defaultToken = "null"
    
    if(localStorage.token){  // 判断localStorage是否存在该值
    //声明一个默认的token
      defaultToken = localStorage.token
    }
    
    export default {
      token:defaultToken
    }
    

    2.修改store目录下index.js文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state.js'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state,
      mutations:{  // 声明函数,改变vuex中的值
        changeToken(state,token){
    		// 更改vuex中值
    		state.token = token
    		// 更改本地存储的值
    		localStorage.token = token
        }
      }
    })
    
    export default store
    

    3.使用

    	第一步导入:
    	import {mapState,mapMutations} from 'vuex'//导入
    	//在上篇axios技术点文章代码进行修改登陆,获取token
    			methods:{
    			//第二步:和上面引入一致 函数要一致 把changeToken导入进来
    			...mapMutations(['changeToken']),
    			login:function(){
    				this.$http.post("/loginUser",{//向login路径发送参数
    					//加上大括号即可传参
    					username:this.username,
    					password:this.pwd
    				}).then(
    					res =>{
    						console.log(res)
    						//传输要更改的值
    						this.changeToken(res.data.data)
    					}
    				)
    			}
    		},
    		//添加计算属性
    		computed:{
    			...mapState(["token"])
    		}
    		//火狐浏览器登陆后直接刷新  谷歌需要刷新页面
    

    localStorage本地存储

    vuex存储data数组

    state.js文件
    let defaultToken = "null"
    if(localStorage.token)
      defaultToken = localStorage.token
    }
    
    export default {
      token:defaultToken,
      userInfo:{}
    }
    
    indexi.js文件
    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state.js'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state,
      mutations:{
        changeToken(state,user){
    		state.token = user.token
    		state.userInfo=user
        },
      }
    })
    
    export default store
    
    <template>
    	<div>
    		<h1>这里是头部文件{{name}}</h1>
    		<!-- 使用v-for需要绑定key值 -->
    		<p v-for="user in list" :key="user.id">
    			<!-- 注意这里是后台实体类属性名 -->
    			{{user.username}}
    		</p>
    		<!-- 双向绑定 -->
    		<template v-if="this.token == null"></template>
    		<template v-else></template>
    		用户名:<input v-model="username" /><br/>
    		密码:<input v-model="pwd" type="password"/>
    		<button @click="login">登陆</button>
    		<h1>令牌{{this.token}}&nbsp;序号{{this.userInfo.id}}&nbsp;用户名{{this.userInfo.username}}</h1>
    	</div>
    </template>
    
    <script>
    	import {mapState,mapMutations} from 'vuex'
    	export default{
    		name:"Header",
    		data:function(){//接收数据
    			return{
    				username:"",
    				pwd:""
    			}
    		},
    		//接受参数
    		props:{
    			//需要声明数据类型
    			name:{
    				type:String
    			},
    			list:{
    				type:Array
    			}
    		},
    		methods:{
    			//和上面引入一致 函数要一致 把changeToken导入进来
    			...mapMutations(['changeToken']),
    			login:function(){
    				this.$http.post("/loginUser",{//向login路径发送参数
    					//加上大括号即可传参
    					username:this.username,
    					password:this.pwd
    				}).then(
    					res =>{
    						console.log(res)
    						//传输要更改的值
    						this.changeToken(res.data.data)
    					}
    				)
    			}
    		},
    		//添加计算属性
    		computed:{
    			...mapState(["token","userInfo"])
    		}
    	}
    </script>
    

    发送表单信息

    main.js文件添加
    const MyAxios = axios.create({
      transformRequest: [function (data) {
        // 将json数据转换为表单数据
        let ret = ''
        for (let it in data) {
          ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    })
    
    

    后台请求不加@@RequestBody this.$post.post("/loginUser"

    拦截器

    main.js文件添加
    // 设置拦截器,在header中插入token
    axios.interceptors.request.use(
      config => {
        //在所有请求头部添加token值
        const token = store.state.token;
    	console.log(token)
        if (token) {
    		// header 中添加数据
    		//          数据key  value
          config.headers.token = token;
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    );
    在原有转换表单数据添加
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    	'token':store.state.token
      }
    

    测试访问 打开网络访问 header携带token
    在这里插入图片描述

    展开全文
  • vuex的时候 刷新以后里面存储的state就会被浏览器释放掉,...在vuex中使用subscribe 和plugins 来实现本地存储vuex相关联,实现vuex持久存储 https://vuex.vuejs.org/zh/api/#plugins 具体细节可查阅官方文档 ...
  • Vuex 本地持久化

    2021-02-05 14:32:39
    vuex-persistedstate import persistedState from "vuex-persistedstate"; Vue.use(Vuex); const store = new Vuex.Store({ ... plugins: [persistedState()],//存储本地当中 }); export default store;
  • vuex本地存储

    2021-05-28 16:19:25
    vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 vuex就是一个仓库 众所周知就是存放公共数据的一个地方 任何组件内的都可以使用vuex中的数据 vuex中的五大核心 State 存放Vuex store实例的状态...
  • vuex本地存储的区别

    千次阅读 2019-02-16 10:36:01
    1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用...
  • 1.最重要的区别:vuex存储在内存,localstorage则以文件的方式存储本地 2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值。 3.永久性:当刷新页面时vuex存储的值会丢失,所以就将...
  • 1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存(不主动删除,则一直存在);sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于...
  • vuex存的是状态,存储在内存,localstorage是浏览器提供的接口,让你存的是文件,以文件的形式存储本地 2、应用场景 vuex用于组件之间的传值,localstorage则主要用于页面之间的传值 3、永久性 当刷新页面时,vuex...
  • vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的...
  • vuex+本地储存登录

    2019-05-31 17:05:20
    //在登录页面进行登录,跟后台进行对接,登录成功的时候提交一个mutations保存后台返回过来的登录...//这时候在整个项目页面下都可以用store访问到用户信息,如果退出登录的话清除本地存储的用户信息就可以了  

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,417
精华内容 2,566
关键字:

vuex的本地存储

vue 订阅