程序员经验分享-hwhale

mpvue中配置vuex并持久化到本地Storage

2023-11-18

demo代码： github.com/jianjian-we…

# 配置vuex和在vue中相同，只是mpvue有一个坑，就是不能直接在new Vue的时候传入store。

步骤：

1.在src目录下新建一个store目录，结构如下（官方推荐：vuex.vuejs.org/zh-cn/struc…）


2. 在main.js中引入你的store, 并绑定到Vue构造函数的原型上，这样在每个.vue的组件都可以通过this.$store访问store对象。


3. ok，可以使用了。我说一下vuex官方推荐的使用方案（可适应大型应用）。

 首先在mutation-types.js中定义你的Mutation的名字


为什么要先定义名称常量？（下图截取自vuex文档）


然后在mutations.js中写处理方法


接着在index.js中定义变量：


ok,下面在组件中使用


ok了。


# 将vuex中的数据持久化到本地 （使用vuex-persistedstate）（github.com/robinvdvleu…）


安装插件后在store中引入（配置如下）：


ok 了（vuex中的数据已经实时的同步到本地）。

（tips: 提示，小程序每次进入都会执行removeItem方法，导致数据存储不下来，所以暂时把上图的removeItem后面的函数写为一个空函数！！）



demo代码： github.com/jianjian-we…


转载于:https://juejin.im/post/5aa782db5188255574595ea4

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ViewUI

mpvue中配置vuex并持久化到本地Storage 的相关文章

随机推荐

  • Vue自定义指令及使用

    一 什么是指令 学习 vue 的时候肯定会接触指令 那么什么是指令呢 在 vue 中提供了一些对于页面和数据更为方便的输出 这些操作就叫做指令 以 v xxx 表示 比如 html 页面中的属性 div div div gt 比如在 ang

  • HC-05两个蓝牙配对经验（绝对好使）！！！！！

    特别注意 一 串口调试助手发送 命令时 波特率最好是38400 其他的可能不好使 具体自己可以尝试一下 二 发送命令的时候一定要加入换行 否则不好使 步骤 首先 断电按下蓝牙上的按键进入AT模式 这时候灯会慢闪 大约两秒一次 1 串口调试助

  • python中__str__()函的用法

    python中 str 函数的用法 定义一个 str 的用法 class Person def init self name age self name name self age age def str self return My na

  • 无线WiFi网络的密码破解攻防及原理详解

    大家应该都有过这样的经历 就是感觉自己家的无线网怎么感觉好像变慢了 是不是有人蹭我家网 还有的时候咱们出门也想试图蹭一下别人家的网 这里 蹭网 的前提是要破解对方的 无线密码 那么这个 无线密码 到底是否安全呢 其技术原理是如何的呢 我们又

  • 相应通道无电压但ADC的值却在大幅变化且不等于0的可能原因

    今天分享一个自己的粗心引起的现象 就是之前在做ADC时候 采用单通道 规则组 和软件触发 发现ADC采集的值一直在变化 而且我都没有输入相应的电压 按理来说 ADC输出的值应该为0 10 存在偏差 但是其值却不等于0并且一直不断的变化 于是

  • 基于免疫优化算法的物流配送中心选址规划研究（Matlab实现）

    目录 1 概述 2 物流配送中心选址规划研究 3 Matlab代码 4 结果 1 概述 影响物流配送中心选址的因素有很多 精确选址优化问题亟待解决 通过充分考虑货物的配送时间 将免疫算法加入其中 介绍了物流配送选址模型的构建以及免疫算法实现

  • Spring AOP源码解析-拦截器链的执行过程

    一 简介 在前面的两篇文章中 分别介绍了 Spring AOP 是如何为目标 bean 筛选合适的通知器 以及如何创建代理对象的过程 现在得到了 bean 的代理对象 且通知也以合适的方式插在了目标方法的前后 接下来要做的事情 就是执行通知

  • 主流开源数据库的技术特点（转载）

    点评主流开源数据库的技术特点 2006 02 24 来自 计算机世界 曹江华 随着开放源代码软件的使用越来越广泛 像Linux操作系统一样 开放源代码数据库的出现也有其必然性 在当Oracle IBM Microsoft Sybase 等几

  • 振动数据采集上位机（包含实时智能算法分析）开发

    功能模块介绍 上位机界面如下 开始采集按钮 当点击该按钮后 上位机开始采集数据 并界面展示时域数据信号 在开始采集之前必须先输入串口号和波特率和采样率 FFT分析 当点击按钮后 界面展示FFT频谱 系统参数按钮 可继续扩展 当点击该按钮后

  • 2的31次方和3的21次方哪个大，123组成最大的数是多少？

    123这三个数字组成最大的数是什么数 面试官告诉小孙 123这三个数字组成最大的数是什么数 我希望你能够在5分钟之内回答出来 小孙当时连想都没有想 123组成的最大数字 当然就是123了 当小孙把这个答案告诉面试官的时候 面试官摇摇头 然后

  • Min Difference 二分优化

    题目链接 暴力的时间复杂度是O n 2 n 2 n2 只能在查询的时候优化一下 可以手写一个左闭右开的二分 也可以使用库函数 l

  • 英语语法笔记——并列句（二）

    找出长难句主干的三个步骤 看标点符号 看标点符号 看逗号 判断都在前面和逗号后面的部分 看看 介词 从句和非谓语动词在前面还是后面 如果在前面主干就在后面 如果在后面 主干就在前面 介词等 主干 主干 介词等 看分号 分号前后相当于一个并列

  • k8s 裸机安装 nginx1.19 ingrass

    k8s 裸机安装 nginx1 19 ingrass deploy yaml文件如下 apiVersion v1 kind Namespace metadata name ingress nginx labels app kubernete

  • javaAPI

    第一章 集合框架 集合框架 多个接口和类 不知道存在的对象的数量或者需要更复杂的方式来存储对象时 一一对应时也可以使用 可以使用集合框架 Java集合框架提供一套性能优良 使用方便得接口和类 它们为与java util包中 a Collec

  • 英语什么叫做自控力720词

    Two common terms from the psychological literature are self regulation and self control Self regulation is your ability

  • idea导入项目，Lombok插件安装了，且配置文件中配置了，还是不能正常启动，表示找不到get、set方法

    1 保证安装了Lombok插件 2 保证maven或者gradle中添加了依赖 3 如下配置

  • E45: ‘readonly‘ option is set (add ! to override)

    vim 修改文件出现错误 E45 readonly option is set add to override 其实这是权限造成的 文件设置成了只读权 只读文件修改前需要执行sudo 但是已经修改了 如何强制保存呢 只需要保存的时候执行如下

  • 【Python】读取txt文件，获取指定行中指定位置数据

    问题描述 需求 读取大约有200多行的txt文件 获取17 216行中每行中指定位置中的数值 实现 coding utf 8 Date 2020 5 21 21 53 Author Pangpd FileName read log py I

  • pytorch: tensor类型的构建与相互转换

    Summary 主要包括以下三种途径 使用独立的函数 使用torch type 函数 使用type as tesnor 将张量转换为给定类型的张量 使用独立函数 import torch tensor torch randn 3 5 pri

  • mpvue中配置vuex并持久化到本地Storage

    demo代码 github com jianjian we 配置vuex和在vue中相同 只是mpvue有一个坑 就是不能直接在new Vue的时候传入store 步骤 1 在src目录下新建一个store目录 结构如下 官方推荐 vuex

热门标签