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);
相关推荐
小码哥_常3 分钟前
解锁Android权限申请新姿势:与前置说明弹窗共舞
前端
紫_龙23 分钟前
最新版vue3+TypeScript开发入门到实战教程之路由详解三
前端·javascript·typescript
-SOLO-27 分钟前
使用Cursor操控正在打开的Chrome
前端·chrome
chiwei_hua27 分钟前
如何在 Blazor Web 前端中使用 C# 进行数据交互?
前端·c#·交互
pacong32 分钟前
vscode使用
javascript·vue.js·vscode
jacklood1 小时前
使用STM32的迪文屏控制使用参考方式
前端·javascript·stm32
KevinCyao1 小时前
Go短信营销接口示例代码:Golang高并发调用营销短信接口的实现方案与代码分享
android·前端·网络·golang·前端框架
Moyo2031 小时前
前端 -- react快速入门
前端·react.js·前端框架
whuhewei2 小时前
在React中实现CSS动画的回放
前端·css·react.js
北海军2 小时前
render el-select下拉框
前端·javascript·vue.js