在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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
python2.7实现邮件发送功能
2018/12/12 Python
python 实现多线程下载视频的代码
2019/11/15 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
企业治理工作自我评价
2013/09/26 职场文书
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python