mpvue中配置vuex并持久化到本地Storage图文教程解析


Posted in Javascript onMarch 15, 2018

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

步骤:

1.在src目录下新建一个store目录,结构如下(官方推荐:  vuex.vuejs.org/zh-cn/struc… )

mpvue中配置vuex并持久化到本地Storage图文教程解析 

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

mpvue中配置vuex并持久化到本地Storage图文教程解析 

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

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

mpvue中配置vuex并持久化到本地Storage图文教程解析 

为什么要先定义名称常量?(下图截取自vuex文档)

mpvue中配置vuex并持久化到本地Storage图文教程解析 

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

mpvue中配置vuex并持久化到本地Storage图文教程解析 

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

mpvue中配置vuex并持久化到本地Storage图文教程解析 

ok,下面在组件中使用

mpvue中配置vuex并持久化到本地Storage图文教程解析 

ok了。

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

安装插件后在store中引入(配置如下):

mpvue中配置vuex并持久化到本地Storage图文教程解析 

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

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

mpvue中配置vuex并持久化到本地Storage图文教程解析 

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

总结

以上所述是小编给大家介绍的mpvue中配置vuex并持久化到本地Storage图文教程解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
JavaScript学习笔记之数组的增、删、改、查
Mar 23 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
Vue基础配置讲解
Nov 29 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
iview中Select 选择器多选校验方法
Mar 15 #Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 #Javascript
基于IView中on-change属性的使用详解
Mar 15 #Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 #Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 #Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 #Javascript
微信小程序实现换肤功能
Mar 14 #Javascript
You might like
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
在linux中使用包管理器安装node.js
2015/03/13 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
JS中递归函数
2016/06/17 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
vue实现拖拽效果
2019/12/23 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python常用库之NumPy和sklearn入门
2019/07/11 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
Python控制台实现交互式环境执行
2020/06/09 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
python Scrapy框架原理解析
2021/01/04 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
节水标语大全
2014/06/11 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2016银行求职自荐信
2016/01/28 职场文书
python实现进度条的多种实现
2021/04/29 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis