编程 Javascript

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

Posted in Javascript onMarch 15, 2018

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

步骤：

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

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图文教程解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

守护四叶草

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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