vuex——重置vuex数据

简介: vuex——重置vuex数据

需求描述

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

实现方法

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

完整代码范例

src\store\index.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

import { store_State_init } from "@/store";
 
this.$store.replaceState(store_State_init);
目录
相关文章
|
7月前
|
存储
vuex5种状态?
vuex5种状态?
|
7月前
|
JavaScript 开发者
Vue状态管理: 在Vuex中,什么是mutation?它们应该如何使用?
Vue状态管理: 在Vuex中,什么是mutation?它们应该如何使用?
204 4
|
存储 JavaScript
Vue2(状态管理Vuex)
Vue2(状态管理Vuex)
|
2月前
|
存储 Web App开发 监控
Vuex学习一:了解Vuex,初始用vuex,vuex状态管理图的讲解
这篇文章是关于Vuex的基本使用和状态管理的教程,包括项目搭建、Vuex配置、状态共享问题、Vuex介绍以及如何在Vue组件中使用Vuex进行状态管理。
25 0
Vuex学习一:了解Vuex,初始用vuex,vuex状态管理图的讲解
|
2月前
|
存储 缓存 资源调度
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
Vue3状态管理新选择:Pinia安装与使用详解,以及与Vuex的对比分析
150 0
|
7月前
|
存储 JavaScript 前端开发
vuex的5种状态
vuex的5种状态
36 0
|
7月前
|
JavaScript
Vue状态管理:什么是getters?Vuex中的getters有什么作用?
Vue状态管理:什么是getters?Vuex中的getters有什么作用?
257 3
|
7月前
Vuex各种状态的使用
Vuex各种状态的使用
|
缓存 JavaScript
Vue Vuex 更新页面 Store 数据丢失
Vue Vuex 更新页面 Store 数据丢失
127 0
|
存储 JavaScript 数据处理
【Vue五分钟】 Vuex状态管理总结
这个Vuex是一个专门为了vue项目开发而开发的状态管理的模式。因为我们的vue组件之间都会存在自己的状态,并且每一个数据之间都需要共享需要的数据。
【Vue五分钟】 Vuex状态管理总结

热门文章

最新文章