首页 > 其他分享 >Vuex 持久化数据更新(vuex-persistedstate)

Vuex 持久化数据更新(vuex-persistedstate)

时间:2022-11-15 09:33:12浏览次数:48  
标签:持久 数据 Vuex modules export persistedstate vuex IOS

在 Vuex 的使用过程中, 会面临 数据持久化问题,如:用户数据、菜单数据、必要的信息数据等。

遇到问题:改变数据后 F5 刷新页面,数据不改变
使用方式

export default {
  mounted() {
    modules.user.userName = "IT_IOS_MAN"
  }
}

解决方案

export default {
  mounted() {
    store.commit('changeName',  "IT_IOS_MAN");
  }
}

mutations.js

export const changeName= (modules, name) => {  // 改变名字
  modules.user.userName= payload.name;
}

注意: 方法必须已 change 开头,否则不持久化数据不改变

标签:持久,数据,Vuex,modules,export,persistedstate,vuex,IOS
From: https://www.cnblogs.com/IT-IOS-MAN/p/16891360.html

相关文章

  • Vue2.x下的各组件如何传递信息?(不使用Vuex)
    Vue2(选项式)一,父组件向子组件传递数据:介绍:在引用的子组件中定义自定义属性msg与user.可以通过v-bind绑定要发送的数据。  在子组件中使用props接收自定义属性msg......
  • Vuex管理dialog、toast等常见全局性组件状态时唯一性的问题
    前言工作中经常会用到类似于dialog、toast、popover等一些状态提示组件。对于这种全局性的组件,通常会用到vuex来管理组件的信息。这样的好处是代码维护起来更加友好,但......
  • Vue面试题48:你觉得Vuex有什么缺点?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
    体验使用模块:用起来比较繁琐,使用模式也不统一,基本上得不到类型系统的任何支持:conststore=createStore({ modules:{a:moduleA}})store.state.a......
  • 46.使用过vuex和vue-router吗
    使用过,vuex是状态管理工具,它的数据可以被所有的组件获取,方法可以被所有的组件调用;vuex 的内部的运行机制:state提供了数据驱动视图,dispath派发actions执行异步操作,comm......
  • 组件之间的通信2-->vuex状态管理
    在上期,我们讲了父子组件的传递方式,但是,如果我们想知道这些数据从哪里来的话,就需要一层一层找父组件,最后才能找到数据,容易造成Prop逐级透传问题今天,我们将介绍另一......
  • 谈一谈 vuex 的运行机制
    Vuex提供数据(state)来驱动视图(vuecomponents),通过dispath派发actions,在其中可以做一些异步的操作,然后通过commit来提交mutations,最后mutations来更改state。 ......
  • 快速上手VueX
    前言本文主要介绍了VueX状态管理器、VueX的核心概念、store.js以及vuex的工作流程。理解了这些概念可以让我们快速上手使用VueX,实现对Vue的状态管理。VueXVueX是对Vue的......
  • Vuex中actions如何优雅处理接口请求
    前言在项目开发中,如果使用到了vuex,通常我会将所有的接口请求单独用一个文件管理,而业务逻辑写在actions中,一方面方便统一管理项目中的所有请求,其次代码结构更加清晰,最重......
  • Vuex刷新页面数据会丢失吗?咋解决的?
    1、问题描述:页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋......
  • 基于VUEX的公共存储器store的快速上手流程
    vuex的快速安装与使用​​store公共存储器​​​​state.js添加数据元​​​​mutations.js创建一个方法​​​​在组件中提交:​​​​在组件中使用:​​store公共存储器在使......