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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
Vue实现验证码功能
Dec 03 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
9个JavaScript日常开发小技巧
Oct 06 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
python中map()函数的使用方法示例
2017/09/29 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
基于Python中的yield表达式介绍
2019/11/19 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python常用编译器原理及特点解析
2020/03/23 Python
Python itertools.product方法代码实例
2020/03/27 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python exit出错原因整理
2020/08/31 Python
python中使用np.delete()的实例方法
2021/02/01 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
高一政治教学反思
2014/01/28 职场文书
车辆工程专业求职信
2014/06/14 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
陪护人员误工证明
2015/06/24 职场文书
清明节主题班会
2015/08/14 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB