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也是一样的。


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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