在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 相关文章推荐
javascript 新浪背投广告实现代码
Jul 07 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
javascript cookies操作集合
Apr 12 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
javascript实现表单验证
Jan 29 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 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
PHP Error与Logging函数的深入理解
2013/06/03 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
js转换对象为xml
2017/02/17 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python创建系统目录的方法
2015/03/11 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
详解Python 解压缩文件
2019/04/09 Python
Python中logging日志库实例详解
2020/02/19 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
制药工程专业个人求职自荐信
2014/01/25 职场文书
市三好学生主要事迹
2014/01/28 职场文书
软件项目开发计划书
2014/05/01 职场文书
我爱我校演讲稿
2014/05/21 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技