首页 > 其他分享 >Vue使用vuex刷新页面后state数据丢失

Vue使用vuex刷新页面后state数据丢失

时间:2023-11-12 19:14:01浏览次数:25  
标签:navCollapse Vue state import vuex createPersistedState

使用 createPersistedState 做持久化

安装:npm install vuex-persistedstate --save

使用:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
import navCollapse from './modules/navCollapse';
import user from './modules/user';
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    getters:{},
    modules:{
        user,
        navCollapse,
    },
    plugins:[createPersistedState()]
})

export default store;

插件参数说明

createPersistedState配置:

createPersistedState({options}) 

options里面可以有:

key: String 存储到localStorage, sessionStorage 中对象的key,默认为vuex

local: Object 和 session: Object, 分别代表localStorage的配置和sessionStorage的配置

local 和 session 里面可以有: include: Array 和 exclude: Array

标签:navCollapse,Vue,state,import,vuex,createPersistedState
From: https://www.cnblogs.com/SHGG/p/17827579.html

相关文章

  • vue基础
    一基础1、v-modelv-bind v-model一般为用户在页面输入的值 而v-bind不行(单项绑定)2、事件v-on  所有定义的方法都应该放在methods中3、vue事件修饰符prevent stop once  4、系统修饰键@keyup   例子@keyup.ctrl="shop" 在按ctrl可以进入绑......
  • vue指令
    props:当不需要检查时,可以写成props:['value']此时,不管传过来什么都不会检查,如果想要将数据进行检查,就可以将改成1.类型验证props:{'value':Number} 此时会限制类型为Number的数据2.如果需要更加完整的检查props:{'value':{type:Number,required:tr......
  • vue平级访问数据
    <template><divclass="a"><h2>thisisA</h2><span>{{msg}}</span></div></template><script>importBusfrom'../Tools/EventBusTool';exportdefault{data(){......
  • vue跨层访问数据
    <template><divclass="grf">thisisgrandpa<FatherComponent></FatherComponent></div></template><script>importFatherComponentfrom'./FatherComponent.vue';exportdefault{......
  • vue封装一个加载过程
    app.vue<template><divclass="main"><divclass="box"v-isLoging="isLoged"><ul><liv-for="iteminlist":key="item.id"class="news">......
  • vue项目部署添加时间
    constfs=require('fs');constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');classBuildTimePlugin{ apply(compiler){  constbuildTime=+newDate()  compiler.hooks.beforeCompile......
  • vue无法正确使用mastache渲染实例
    问题:<script>varvm=newvue({el:"#app",data:{message:"hello,vue!"}});</script>这段代码中,`vm`是通过`newVue()`创建的一个Vue实例。但是在HTML文件中,`<divid="app">`元......
  • Vue中的插槽
    插槽-默认插槽作用:让组件内部的一些结构支持自定义需求:要在页面中显示一个对话框,封装成一个组件,但是组件的内容部分,不是写死的,希望能使用时自定义。插槽的基本语法组件内需要定制的结构部分,改用<slot></slot>占位使用组件时,在组件中传入结构替换slot,例如<组件名>xxxxxx</组......
  • Vue 实验
    项目初始化#前提:包管理器安装vue-clivuecreate项目名称Vue2实验目的了解Vue2的组件实现机制数据绑定机制双向绑定:input单向绑定父组件→子组件:父组件传入的参数组件→用户:页面内部参数属性监听机制:被监听的参数实验内容实现一个简单的组件,体现......
  • vue自定义指令
    app.vue<template><divclass=""><!--自定义指令全局<inputv-focustype="text"name=""id=""><br>自定义指令局部<inputv-focus2type="text"name=""id="&......