vue 重置vuex数据

有时候在我们把数据存储下来的时候,在某个时候需要移除这些数据却不知道怎么移除了;下面我有一些自己的方法

一: dispatch重新赋值

store.js

const actions = {//这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性setGargetUser({ commit }, targetUser) {commit("SET_TARGET_USER", targetUser);// localStorage.setItem("SET_TARGET_USER", JSON.stringify(targetUser));},
};

vue页面:赋空值

     methods:{empty(){this.$store.dispatch('setGargetUser','')}},

方法二:在actions定义一个方法;

const actions = {//这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性resetVuex({ commit }) {commit("SET_TARGET_USER", null);}
};

vue页面调用:

     methods:{empty(){this.$store.dispatch('resetVuex')}},

第三种方法:用es6的 Object.assign();复制

/*** 创建完文件后需要去到main.js中引入成全局*/
import Vue from "vue";
import Vuex from "vuex";//使用vuex
Vue.use(Vuex);/*** 在需要多人协作的项目中，我们可以使用常量代替mutation 事件类型。这在各种 Flux 实现中是很常见的模式。同时把这些常量放在单独的文件中可以让协作开发变得清晰。*  定义存储信息*   */const types = {SET_USER: "SET_USER", //用户信息SET_TARGET_USER: "SET_TARGET_USER",RESET_STATE: "RESET_STATE" // reset state
};// 定义初始状态
const INIT_STATE = {user: {},targetUser: {}
};const state = {//用户初始化的状态user: {},targetUser: {} //用户详细资料数据
};const getters = {//获取到用户状态,//实时监听state值的变化(最新状态)user: state => state.user,targetUser: state => state.targetUser
};const mutations = {//自定义改变state初始值的方法// 确定type属性类型[types.SET_USER](state, user) {if (user) {state.user = user; //如果user有内容就赋给状态信息} else {//如果没内容就给user赋空对象state.user = {};}},[types.SET_TARGET_USER](state, targetUser) {if (targetUser) {state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息} else {//如果没内容就给targetUser赋空对象state.targetUser = {};}},// 重置所有状态[types.RESET_STATE](state, initState) {if (initState) {/*** 注：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性* Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。*  */Object.assign(state, initState);}}
};const actions = {//这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性// 页面定义的setUser,user为页面传过来的值setUser: ({ commit }, user) => {// 把user存储到types中的SET_USERcommit(types.SET_USER, user);},setTargetUser({ commit }, targetUser) {commit(types.SET_TARGET_USER, targetUser);// localStorage.setItem("SET_TARGET_USER", JSON.stringify(targetUser));},// 重置所有状态resetState({ commit }) {commit(types.RESET_STATE, INIT_STATE);}
};export default new Vuex.Store({state,mutations,getters,actions
});

使用存储:

 this.$store.dispatch('resetState')

vue 重置vuex数据相关推荐

vue重置data数据神器之Object.assign()
项目场景: 很多时候我们要重置vue data里边的数据例如:用户退出登录,from表单重置数据等等想法 Object.assign() Object.assign(target,...sourc ...
快速重置vuex数据 - Vue
首发于: https://lonhon.top 最近遇到的一个场景,由于项目的权限系统+路由控制中用到了vuex存储全局数据,在登出时需要将所有数据进行重置or清空. 比如 store.state.u ...
【Vue】Vuex来改写MyClassroom.vue，点击【Vuex-保存】保存教室数据-20221226
Vuex来改写MyClassroom.vue,点击[Vuex-保存]保存教室数据坑1:template中调用方法不用带this <button @click="saveClassro ...
vue项目中解决浏览器刷新vuex数据消失问题
vue项目中解决浏览器刷新vuex数据消失问题说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中. 操作打开App.vue,在created ...
js 操作vuex数据_Vuex 数据状态持久化如何处理？
点击右上方红色按钮关注"web秀",让你真正秀起来前言在前面文章中,我们详细的讲述了Vuex相关的知识,没有了解的小伙伴可以先去了解一波: <Vuex是什么?Vuex能做 ...
vue+vue-router+vuex实战
shopping vue + vue-router + vuex实现电商网站效果展示 install 下载代码: git clone https://github.com/chenchangyuan ...
antd vue 树更新数据后不展开_很全面的vue面试题总结
VUE面试题 v-show 与 v-if 区别动态绑定class的方法计算属性和 watch 的区别怎样理解单向数据流 keep-alive 自定义组件的语法糖 v-model 是怎样实现的生 ...
音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）
音乐.视频播放模式切换实现方案及原理解析(基于vue.vuex.h5 audio) 播放模式有三种: 顺序播放随机播放单曲循环定义为一个playMode对象并向外暴露,内含三种播放模式,即为: ...
Vue使用Vuex一步步封装并使用store
文章目录一.安装Vuex依赖二.一步步封装store 1. main.js中全局引入store仓库(下一步创建) 2. this.$store 3. this.$store.state 4. th ...

vue 重置vuex数据

vue 重置vuex数据相关推荐

最新文章

热门文章