关于vuex的用法 个人心得

2019-10-10 admin

关于一些vuex的用法 个人心得 闲时记下 vuex安装 npm install vuex --save

cnpm install vuex --save

cnpm 配置方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

官方文档里面关于vuex的描述

image.png

这里只说说 我自己对于vuex用法的理解 如有不对 请指出

首先你要这样

image.png

然后 这样

image.png

然后 在你的入口文件 一般就是main.js

image.png

state: vuex的核心 存放着所有需要使用的数据

image.png

以上内容是我项目里面的数据 举个栗子

mutation: 引用官网的依据话。更改 Vuex 的 store 中的状态的唯一 方法是提交 mutation。完美的解释了Mutation的作用。

image.png

传递值方式 image.png

action: action提交的就是Mutation 因为更改vuex的store中的状态只能够是使用Mutation,所以 action是无法直接修改store的状态的。

image.png

action 使用方法 需要注意的是 action提交的是Mutation 不要弄错哦

image.png

如果你的项目比较复杂 你还可以这样

image.png

使用module 分块方式来进行管理

image.png

每一个Js 就是对应某个业务代码的分块 这样的话 维护起来会比较方便

image.png

每一个分块 都有自己独立的 state mutation action

image.png

最后只需要在index.js 里面引入就可以了

image.png

这是getter的写法 这样的话只要getter里面有返回值的 都可以通过 this.$store.getter. … 取到值

至于最后关于辅助函数的具体用法 下次再讲吧

以上就是我再项目里面使用过的关于vuex的方法 有不对的地方希望大家都指出来哦 一起讨论 一起进步

还有就是上面的代码都是手写的Demo代码 如果出现运行错误的话 也可以指出哦

[转载]原文链接:https://segmentfault.com/a/1190000020641820

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77060.html

文章标题:关于vuex的用法 个人心得

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) <s...
2018-03-08
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部