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 秒表实现代码
Jul 24 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Node 自动化部署的方法
Oct 17 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 Javascript
详解JS函数防抖
Jun 05 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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/01/12 PHP
PHP学习记录之数组函数
2018/06/01 PHP
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
python设计模式大全
2016/06/27 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
linux 下selenium chrome使用详解
2020/04/02 Python
python实现处理mysql结果输出方式
2020/04/09 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
接口的多继承会带来哪些问题
2015/08/17 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
this关键字的作用
2016/01/30 面试题
党员廉洁自律承诺书
2014/05/26 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2016年清明节寄语
2015/12/04 职场文书