109. reset vuex state（重置 vuex 状态）

最新推荐文章于 2025-01-14 13:50:55 发布

小小鲁班ly525

最新推荐文章于 2025-01-14 13:50:55 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： vuex

本文链接：https://blog.youkuaiyun.com/u010181895/article/details/88571677

版权

本文介绍了如何重置Vuex的状态，包括错误做法和推荐的解决方案，如使用Object.assign()和Object.keys()，并提供了相关的官方文档和社区讨论链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首发于我的github博客, 欢迎关注

关键字 vuex, Object.assign

如何重置 vuex

错误做法

RESET_STATE: (state) => {
   
  // [Warning]: 下面这种做法是错的，违反 Vue 响应式原则。
  // 参见：https://forum.vuejs.org/t/replacing-state-object-not-updating-getter-in-vuex/10149/8
  state = getDefaultState();

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小小鲁班ly525

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vuex如何重置所有state(可定制)

10-17

通过这种方式，我们可以实现可定制的Vuex状态重置。当需要完全重置时，可以直接调用`resetAllState` mutation而不传入任何参数。如果只想重置一部分状态，可以提供一个包含需要保留状态名称的数组作为`payload`。...

state重置 vuex_如何正确地 reset Vuex module state

weixin_35648203的博客

01-17

937

这是项目之前遇到的一个bug，最终发现是由于 reset Vuex state 不正确，污染了 initState 导致的，隐藏得还挺深的，在这里记录一下。(PS：想直接看代码实现的同学可以从第三节，正确地 reset module state 的姿势开始看)背景项目是用 Vue + Nuxt 写的一个H5网页。下图是分类页的界面，左边的导航给出的分类项可以叠加选择。在选择了任意分类项后点击重...

参与评论您还未登录，请先登录后发表或查看评论

重置 vuex_Vue 的状态管理工具 vuex 的基本使用

weixin_32956805的博客

01-13

750

基于以下基本结构来介绍Vue 的状态管理工具 vuex 的基本使用。mian.jsimport Vue from 'vue' import App from './App.vue' import router from "./router"; // 引入重置样式 import "./assets/reset.css"; Vue.config.productionTip = false; ne...

Vuex Store 重置为初始状态的实现与应用

最新发布

z283603的博客

01-14

749

在构建复杂的Vue.js应用程序时，管理全局状态至关重要。Vuex作为Vue的状态管理库，提供了集中式存储和管理应用所有组件状态的能力。本文介绍了如何优雅地将Vuex Store中的状态重置为初始状态，确保应用能够在特定场景（如用户登出或页面刷新）下恢复到一个干净的状态。

vuex——重置vuex数据

朝阳39的博客

11-10

1221

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

vuex清掉数据_快速重置vuex数据 - Vue

weixin_35902168的博客

12-23

4734

首发于： https://lonhon.top最近遇到的一个场景，由于项目的权限系统+路由控制中用到了vuex存储全局数据，在登出时需要将所有数据进行重置or清空。比如 store.state.username初始为'' => 登陆后变成'张三' => 登出后还是'张三'，此时需要置为''.解决方法0.1actions.resetVuex=function(){store.com...

vuex重置所有state

前端小99的博客

11-23

2827

在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法： 1、页面刷新： window.location.reload() 这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担，所以我尝试之后就放弃了。 2、写一个重置的方法然后调取 actions.resetVuex = function() { store.commit(stat..

浅谈vuex 闲置状态重置方案

11-27

理想情况下，我们希望在路由切换时重置前一个路由对应的 Vuex 状态。但这并不简单，因为路由与 Vuex 模块的对应关系不是一对一的。一种解决方案是，在路由变化时重置 Vuex 中的所有状态。这可以通过监听路由变化并...

vuex-reset:一个Vuex插件，可以轻松地将初始状态恢复到商店

05-13

@ ianwalter / Vuex重置一个插件，可以轻松地将初始状态恢复到商店... // A no-op mutation must be added to serve as a trigger for a reset. The // name of the trigger mutation defaults to 'reset' but can be

vuex-extensions:将Vuex重置为初始状态并支持gettersmutationsaction mixins

05-12

Vuex的重置功能和Mixins选项Vuex扩展向Vuex添加Reset和Mixins功能资源中：将中：安装您可以通过NPM安装它 npm install vuex-extensions 或YARN yarn add vuex-extensions用法在上查看示例。创建Vuex.Store import ...

reset.css重置样式文件

06-23

重置样式文件、用于商城页面的外部链接css样式，下载拿来即用，不好用你可以来~我，欢迎前来下载，多多支持，给个小星星给个小赞吧

vue 重置vuex数据

热门推荐

周家大小姐

01-10

1万+

有时候在我们把数据存储下来的时候,在某个时候需要移除这些数据却不知道怎么移除了;下面我有一些自己的方法一: dispatch重新赋值 store.js const actions = { //这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性 setGargetUser({ commit }, targetUser) { ...

重置Vuex本地存储状态

m0_51431448的博客

01-19

3892

思路：在初始化的时候，也就是store的初始状态，把state中的所有状态都拷贝出以一份（这里一定是深拷贝），然后在需要重置状态的时候，再将其还原回去（这里也一定是深拷贝方式）一：初始化的时候向window挂载属性，并将全部最初的状态拷贝一份 main.js import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import

vue项目退出登录清除 store 数据

IT博客技术分享

07-05

7297

在退出登录的loginOut 方法里面: 利用v-if控制router-view，在根组件APP.vue中实现一个刷新方法然后使用的时候调用： this.reload() 方法

如何正确地 reset Vuex module state

Dandelion_drq的专栏

03-24

1089

这是项目之前遇到的一个bug，最终发现是由于 reset Vuex state 不正确，污染了 initState 导致的，隐藏得还挺深的，在这里记录一下。

vuex 如何重置state

z467469274的博客

10-18

4761

var copyState = deepCopy(state); //拷贝state对象 mutations={ mResState(state){ for(var i in copyState){ state[i] = copyState[i] // 递归赋值 } } } function...

state重置 vuex_vuex重置所有state(可定制)

weixin_42628464的博客

01-30

233

在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法：1、页面刷新：window.location.reload()这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担，所以我尝试之后就放弃了。2、写一个重置的方法然后调取actions.resetVuex ...

state重置 vuex_vuex重置一切state(可定制)

weixin_28913019的博客

01-17

403

在正式场景中我们常常碰到一个题目，就是登出页面或其他操纵的时刻，我们须要重置一切的vuex，让其变成初始状况，那末，就触及到了多种要领：1、页面革新：window.location.reload()这个要领经由过程路由推断优化或是逻辑优化，一直页面时从新加载，就会致使用户体验很差，对浏览器来讲也是一种不必要的累赘，所以我尝试以后就摒弃了。2、写一个重置的要领然后调取actions.resetVue...

Vuex_RESET插件：快速恢复VueX初始状态教程

const store = new Vuex.Store({ plugins: [VuexReset()], state: { message: 'Welcome!' }, mutations: { // 必须添加一个空操作（no-op）的mutation，以便作为重置的触发器。 // 触发重置的mutation的名称...