在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 相关文章推荐
jQuery find和children方法使用
Jan 31 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
分享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
十天学会php之第五天
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php mysql 封装类实例代码
2016/09/18 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
500行python代码实现飞机大战
2020/04/24 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
给国外客户的邀请函
2014/01/30 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
阳光体育运动标语口号
2015/12/26 职场文书