vuex基本介绍

介绍:

      本文主要介绍vuex 中五个核心概念的基本用法,帮助对于不太看懂官方文档的同学

前提:

1. 熟悉vue的基本用法(至少官方的api大概都会用)

2.能创建基本vue-cli脚手架

3.熟悉es6(也叫es2015),去看一下阮一峰es6入门(箭头函数,解构赋值,扩展运算符,module,这几个比较重要常见,也非常有用)

准备阶段:

1.搭建完一个基本vue-cli 脚手架

1.安装vuex,

          命令行输入  `npm install vuex`

2.完成2个组件和一个stroe.js文件


hello.vue文件

ctrl.vue文件

text.vue

store.js

在main.js 将vuex注入到vue实例中

运行效果图


组件获取state 两种方法获取

1.$store.state.list  (直接获取 数据量小用这个就行)

2.利用mapState映射 (数据量大复杂用这个)

...mapState(['list']) 这种里面是数组写法,组件用list来获取

...mapState({ls:'list'}) 这种里面是对象写法,组件用ls来获取(ls就是list新的名字)

组件获取getters方法  getters就是state的一个计算属性,类似 vue实例里面的data和computed,两种方法获取

1.$store.getters.getTexts(直接获取)

2.利用mapGetters映射

...mapGetters(['getTexts']) 这种里面是数组写法,方法用getTexts来获取

...mapGetter({gt:'getTexts'}) 这种里面是对象写法,组件用gt来获取(ge就是GetText新的名字)

组件获取mutations方法并触发

1.$store.commit('add',[11,22,33,44,55,66]) (在组件点击事件里面直接触发)

2.利用mapMutations映射

...mapMutations(['add']) 这种里面是数组写法,方法用add来使用

...mapMutations({ad:'add'}) 这种里面是对象写法,组件用ad来使用(ad就是add新的名字)

组件获取actions方法并触发

1.$store.dispatch('add',[11,22,33,44,55,66]) (在组件点击事件里面直接触发)

2.利用mapMutations映射

...mapActions(['asyncfn']) 这种里面是数组写法,方法用add来使用

...mapActions({afn:'asyncfn'}) 这种里面是对象写法,组件用afn来使用(afn就是asyncfn新的名字)

ps:这也是醉了,第一次写简书,死活复制不了代码,干脆就一起图片文字一起写了

利用module 将store数据划分更细的模块

user.js

project.js 和user.js 一样,就是list 数据不一样

store.js文件


ctrl.vue文件

test.vue文件

运行效果图

整理一下

获取不同的模块下面的state数据,

<pre>this.$store.state.a.list</pre>

获取不同模块的getters和mutations和actions,首先将namespaced:true属性,加入模块这样每一个getters,mutations,actions都会有各组模块的前缀,之后利用mapGetter来将getter里面的方法映射到我们的组件中(如果不加namespaced:true属性,所有的模块的getters下面的方法会在一个命名空间内,(也就是在一个对象内),你只能让getters下面的每个方法名字不一样才能正常获取,如果方法名字重复了,你只能获取第一个)

```

...mapGetter('a/',[

       'getText'

])

```

或者

```

...mapGetter('a/',{

       gt:'getText'

})

```

或者

```

...mapGetter({

       gt:'a/getter'

})

```

同理 ,利用mapMutations和mapAction将mutations和actions页getters类似


最后后在组件中直接调用就行了,

ps:就算不加入namespaced:true属性也是可以的,这样你必须让所有模块内部getters,里面的方法名字不一样,才能利用this.$store.getters.(独一无二的名字).或者mapgetters映射(不加入模块名字的情况下)使用,mutations,actions也是一样的。


真的蛋疼,这个代码块弄了好久弄不出来,只好全是图片了,大家凑合看吧。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,937评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,015评论 4 111
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,114评论 0 6
  • 这两天在做Vue移动端的项目,正好用到了Vuex,记录一下相关知识。 一、安装 npm yarn Vuex是Vue...
    婷楼沐熙阅读 7,684评论 2 2
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,457评论 0 7