vuex——重置vuex数据

需求描述

登出系统时,需将 vuex 中存储的数据,恢复为最初的默认状态。

实现方法

通过 replaceState 方法,将最初的 vuex 的 state 数据作为参数传入即可

完整代码范例

src\store\index.js

js 复制代码
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store_State_init = {
  isLogin: false,
  token: "",
  userInfo: {},
};

export default new Vuex.Store({
  state: store_State_init,
  mutations: {
    set_userInfo(state, value) {
      state.userInfo = value;
    },
    set_isLogin(state, value) {
      state.isLogin = value;
    },
  },
  actions: {},
  modules: {},
});

src\views\index\index.vue

js 复制代码
import { store_State_init } from "@/store";
js 复制代码
this.$store.replaceState(store_State_init);
相关推荐
风逸hhh5 分钟前
python打卡day30@浙大疏锦行
java·前端·python
ComPDFKit24 分钟前
使用 React PDF 构建 React.js PDF 查看器的指南
前端·react.js·pdf
二川bro34 分钟前
深度解析Vue项目Webpack打包分包策略 从基础配置到高级优化,全面掌握性能优化核心技巧
vue.js·webpack·性能优化
明长歌35 分钟前
HTML页面渲染过程
前端·html
搏博1 小时前
Hbuilder X4.65新建vue3项目存在的问题以及解决办法
前端·javascript·vue.js·ecmascript
Maya动画技术1 小时前
ollama调用千问2.5-vl视频图片UI界面小程序分享
前端·python·计算机视觉·视觉检测
孩子 你要相信光2 小时前
vue3/vue2大屏适配
前端·javascript·vue.js
武昌库里写JAVA2 小时前
Iteration in Golang – How to Loop Through Data Structures in Go
java·vue.js·spring boot·学习·课程设计
xihaowen2 小时前
Android Edge-to-Edge
android·前端·edge
娃哈哈哈哈呀3 小时前
Vue 3 动态 ref 的使用方式(表格)
前端·javascript·vue.js