在Vue-cli里应用Vuex的state和mutations方法


Posted in Javascript onSeptember 16, 2018

首先,必须安装vuex的依赖

npm install vuex --save-dev

创建专属vuex的文件夹和store.js:

store.js里引入并应用插件vuex

定义常量state,用于存放变量&&定义常量mutations存放对变量的处理方法:

导出Vuex.store的实例,参数为刚才定义的state和mutations:

最后,还要在入口js文件引入到Vue的实例之中:

之后,我们就可以在组件当中,调用到我们在vuex存放的变量和方法:

首先:在父组件调用变量headTitle:

需要用到计算属性computed和vuex的mapState:(注释的写法也可以,但是mapState可以引入多个变量,比较方便)

这样,页面<h1>就会显示我们保存的变量headTitle的值为“口袋香港”

之后,我尝试在子组件,利用mutations的方法去改变headTitle的值:

结果,每次的改变,父组件的<h1>都会跟随改变。

这就是vuex的小小的应用实现。

以上这篇在Vue-cli里应用Vuex的state和mutations方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
JavaScript中对象的不同创建方法
Aug 12 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
分享5个好用的javascript文件上传插件
Sep 16 #Javascript
vuex直接赋值的三种方法总结
Sep 16 #Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 #Javascript
vue2过滤器模糊查询方法
Sep 16 #Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 #Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 #Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 #Javascript
You might like
杏林同学录(九)
2006/10/09 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python的三目运算符和not in运算符使用示例
2014/03/03 Python
详解Python验证码识别
2016/01/25 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Python实现多属性排序的方法
2018/12/05 Python
浅谈Python爬虫基本套路
2019/03/25 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
质量工程师岗位职责
2013/11/16 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
个人典型事迹材料
2014/12/30 职场文书
员工工作表扬信
2015/05/05 职场文书
竞选稿之小学班干部
2019/10/31 职场文书