欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-08-18 08:15:38|栏目:vue|点击:

在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的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,使其不被更新。

当然我们也可以传入值来更新相应值,其他所有值不进行更新(这里我们就不详细说明)

上一篇:Vue 开发必须知道的36个技巧(小结)

栏    目:vue

下一篇:Vue组件开发初探

本文标题:vuex如何重置所有state(可定制)

本文地址:http://www.codeinn.net/misctech/167750.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有