vuex重置所有state(可定制)

singerye 发布于2019-08-23 14:47 / 2882人阅读

摘要：这里为什么是一个数组呢因为这就是标题所描述的可定制，如果页面内重置绝大部分状态，但需要保留其中一些状态的时候我们可以通过我们传递过来的值来剔除相应的，使其不被更新。

在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，
那么，就涉及到了多种方法：
1、页面刷新：

window.location.reload()

这个方法通过路由判断优化或是逻辑优化，始终页面时重新加载，就会导致用户体验很差，对浏览器来说也是一种不必要的负担，
所以我尝试之后就放弃了。

2、写一个重置的方法然后调取

actions.resetVuex = function() {
    store.commit(state.a, null)
    store.commit(state.b, null)
    store.commit(state.c, null)
    ...
}

store.dispatch("resetVuex")

这样又会出现多个module，多个state，需要手动添加多个，工作量巨大且不易维护，而且如果我们state初始是个个数组，一个对象这些更不好操作，更优最多就是我们初始的时候深拷贝一份，但是也需要每个module里进行操作和封装

这两种方法是可以解决问题的，但是我还是没有采用这两种方式，因为感觉已经牺牲了某些东西来达成目的了，通过我反复的实践，和摸索我采取了以下方法：

首先页面加载，第一次加载引入store的时候，store的所有state肯定是初始值，那么我就做一个本地缓存记录下来：
这里我采用了store插件（引用方式参考 https://github.com/nbubna/store）

在main.js创建vue实例之前：

import _store from "store"
import createStore from "./store"
...

const store = createStore() //我创建好的 vuex库
_store({ initState: store.state })  //缓存一个名为initState的初始状态

我们知道main.js是页面载入的时候执行一次的那么缓存的initState就是自己最开始创建store里的state状态
(包含了module里的所有state)；

然后我们在store创建的全局写一个mutation方法
这里我采用了store插件（引用方式参考 https://github.com/nbubna/store）
这里我采用了lodash插件（引用方式参考 https://www.lodashjs.com/）

import _ from "lodash"
import _store from "store2"
...

const store = new Vuex.Store({
    state: {
      token: ""
    },
    mutations: {
      resetAllState (state, payload = []) {
        if (payload instanceof Array === false) { // 验证传入的是一个数组
          return
        }
        
        const initState  = _store("initState") // 取出初始值的缓存
        const _initState = payload.length ? _.omit(initState, payload) : initState // 判断传入值有无数据，有数据剔除相对应的值
        
        _.extend(state, _initState)
      }
    },
    modules: {
     ...
    }
    }）

这个名叫resetAllState的mutation方法里就是讲全局的state替换成我们缓存的state。
这里为什么 payload 是一个数组呢？
因为这就是标题所描述的可定制，如果页面内重置绝大部分状态，但需要保留其中一些状态的时候我们可以通过我们传递过来的state值来剔除相应的state，使其不被更新。
当然我们也可以传入值来更新相应值，其他所有值不进行更新（这里我们就不详细说明）

以上，就是我实践思考出来的方法，可能有不足的地方，欢迎大家提问、交流或提出更好的建议。谢谢

idc机房托管云服务器环境配置安全加固可定制需求或可永久删除几乎所有数据库内容几乎影响所有编译器!“木马源”漏洞可隐藏 Vuex

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101139.html

vuex重置所有state(可定制)

摘要：这里为什么是一个数组呢因为这就是标题所描述的可定制，如果页面内重置绝大部分状态，但需要保留其中一些状态的时候我们可以通过我们传递过来的值来剔除相应的，使其不被更新。在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法：1、页面刷新： window.location.reload() 这个方法通过路由判断...

LeviDing 2019-08-02 14:06 评论0 收藏0
vuex 闲置状态重置方案

摘要：为了做到页面的极致优化，我们需要将那些闲置的状态重置，以减小占用的内存空间。不如当路由改变时去重置中的所有状态。这里只是提供一种重置状态的一种方案，如果有更好方案还请各位看官留言。前言大型单页应用（后面都是指spa），我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题。这种应用少则几十个单页，多则上百个单页。随着路由的频繁切换，每个路由对应的 vuex 中...

junfeng777 2019-08-21 18:36 评论0 收藏0
快速重置vuex数据 - Vue

摘要：首发于最近遇到的一个场景，由于项目的权限系统路由控制中用到了存储全局数据，在登出时需要将所有数据进行重置清空。刷新后，将赋值为从而显示页面内容。最后，一个简单的方法就完成了的重置。首发于： https://lonhon.top最近遇到的一个场景，由于项目的权限系统+路由控制中用到了vuex存储全局数据，在登出时需要将所有数据进行重置or清空。比如 store.state.usern...

wyk1184 2019-08-22 17:35 评论0 收藏0
Vue.js 实践（3）：实现一个漂亮、灵活、可复用的提示组件

摘要：接下来，由简入繁依次实现提示组件的各个功能。那么第一个提示的定时器依然会错误的关闭新提示。增强灵活性最后则是让提示组件更灵活。这次的教程里，我们要把组件化进行到底！最近半年的几个项目中，都遇到了需要使用Toast或者Notification组件的情况。在目前已有的一些基于Vue.js开发的组件库，都没有找到太合适的，所以自己重头实现了一个。历经几个项目的磨练，这个提示组件的功能已经越...

Olivia 2019-08-19 18:46 评论0 收藏0