转载:https://www.cnblogs.com/chinabin1993/p/9848720.html

这段时间一直在用vue写项目,vuex在项目中也会依葫芦画瓢使用,但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。

看了一下午的官方文档,以及资料,才发现vuex so easy!

作为一个圈子中的人,决定输出一下文档,如果你仔细看完这篇文章,保证你对vuex熟练掌握。

我把自己的代码上传到了github,大家有需要的可以拉下来:github

先说一下vuex到底是什么?

  1. vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分。

也就是说,是我们需要共享的data,使用vuex进行统一集中式的管理。

vuex中,有默认的五种基本的对象:

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。

下面我们正式开始,一步步使用vuex

1、首先创建一个vue-cli项目

执行下面的命令,创建一个app项目(这里也可以使用其他非webpack模板,以及非app名称)

  1. vue init webpack app

2、创建完成之后,我们进入文件夹下,并且运行项目

  1. cd app/
  2. npm run dev

接下来我们在src目录下创建一个vuex文件夹

并在vuex文件夹下创建一个store.js文件

文件夹目录长得是这个样子

3、目前我们还没有引入vuex,我们需要先下载vuex,并且引入它

在保证我们处于我们项目下,在命令行输入下面命令,安装vuex

  1. npm install vuex --save

4、安装成功之后,我们就可以在store.js中尽情玩耍我们的vuex了!

在store.js文件中,引入vuex并且使用vuex,这里注意我的变量名是大写Vue和Vuex 

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3.  
  4. Vue.use(Vuex)
  5.  
  6. const state = {
  7. count: 0
  8. }
  9.  
  10. export default new Vuex.Store({
  11. state
  12. })

接下来,在main.js中引入store

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import store from './vuex/store' // 引入store
  5. Vue.config.productionTip = false
  6.  
  7. /* eslint-disable no-new */
  8. new Vue({
  9. el: '#app',
  10. router,
  11. store,
  12. components: { App },
  13. template: '<App/>'
  14. })

然我我们在任意一个组件中就可以使用我们定义的count属性了。

这里我们在helloWorld中使用一下,去除helloworld.vue中不用的标签

  1. <template>
  2. <div class="hello">
  3. <h3>{{$store.state.count}}</h3>
  4. </div>
  5. </template>

打开我们刚才运行项目的浏览器,可以看到已经使用成功了!

并且在vue开发工具中我们可以看到我们定义的变量count

到这一步,已经成功了一小半!vuex很简单吧?

回想一下,我们只需要在下载安装使用vuex,在我们定义的store.js中定义state对象,并且暴露出去。

在main.js中使用我们的store.js(这里是为了防止在各个组件中引用,因为main.js中,有我们的new Vue 实例啊!)

现在我们已经使用了vuex中的state,接下来我们如何操作这个值呢? 没错!用mutations和actions

我们继续操作store.js文件

我们在sotre.js中定义mutations对象,该对象中有两个方法,mutations里面的参数,第一个默认为state,接下来的为自定义参数。

我们在mutations中定义两个方法,增加和减少,并且设置一个参数n,默认值为0,然后在Vuex.Store中使用它

  1. /**
  2. * mutations 里面放置的是我们操作state对象属性的方法
  3. */
  4. const mutations = {
  5. mutationsAddCount(state, n = 0) {
  6. return (state.count += n)
  7. },
  8. mutationsReduceCount(state, n = 0) {
  9. return (state.count -= n)
  10. }
  11. }
  12. export default new Vuex.Store({
  13. state,
  14. mutations
  15. })

然后我们在helloWorld.vue中,使用这个方法

还记得我们如何在组件中使用mutations吗?就和自定义事件非常相似

  1. <template>
  2. <div class="hello">
  3. <h3>{{$store.state.count}}</h3>
  4. <div>
  5. <button @click="handleAddClick(10)">增加</button>
  6. <button @click="handleReduceClick(10)">减少</button>
  7. </div>
  8. </div>
  9. </template>
  1. methods: {
  2. handleAddClick(n){
  3. this.$store.commit('mutationsAddCount',n);
  4. },
  5. handleReduceClick(n){
  6. this.$store.commit('mutationsReduceCount',n);
  7. }
  8. }

来浏览器看一下效果如何!

我们可以看到每当触发事件时,我们都可以在vue开发工具中看到我们触发的mutations方法,以及参数

完美!

接下来就是actions,actions是异步操作

创建actions对象,并且使用

这里我在两个方法中使用了两个不同的参数,一个是context,它是一个和store对象具有相同对象属性的参数。在第二个函数中,我是直接使用了这个对象的commit的方法。

凭大家喜好就行

  1. const actions = {
  2. actionsAddCount(context, n = 0) {
  3. console.log(context)
  4. return context.commit('mutationsAddCount', n)
  5. },
  6. actionsReduceCount({ commit }, n = 0) {
  7. return commit('mutationsReduceCount', n)
  8. }
  9. }
  10. export default new Vuex.Store({
  11. state,
  12. mutations,
  13. actions
  14. })

在helloWorld.vue中

在methods中,增加两个方法,使用dispath来触发

  1. <div>异步操作</div>
  2. <div>
  3. <button @click="handleActionsAdd(10)">异步增加</button>
  4. <button @click="handleActionsReduce(10)">异步减少</button>
  5. </div>
  1. handleActionsAdd(n){
  2. this.$store.dispatch('actionsAddCount',n)
  3. },
  4. handleActionsReduce(n){
  5. this.$store.dispatch('actionsReduceCount',n)
  6. }

进入浏览器看下效果如何!

最后就是getters

我们一般使用getters来获取我们的state,因为它算是state的一个计算属性

  1. const getters = {
  2. getterCount(state, n = 0) {
  3. return (state.count += n)
  4. }
  5. }
  6. export default new Vuex.Store({
  7. state,
  8. mutations,
  9. actions,
  10. getters
  11. })
  1. <h4>{{count}}</h4>
  1. const getters = {
  2. getterCount(state) {
  3. return (state.count += 10)
  4. }
  5. }

getters算是非常简单的了。

到这里,如果全都看懂了,vuex你已经没有压力了。

但是vuex官方给了我们一个更简单的方式来使用vuex, 也就是 {mapState, mapMutations, mapActions, mapGetters}

只要我们把上面基础的搞懂,这些都不在话下,只是方面我们书写罢了。

就这么简单,这里我们用到了es6的扩展运算符。如果不熟悉的同学还是去看看阮一峰大神的《Es6标准入门》这本书,我是看完了,受益匪浅!

  1. <script>
  2. import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
  3. export default {
  4. name: 'HelloWorld',
  5. data () {
  6. return {
  7. msg: 'Welcome to Your Vue.js App'
  8. }
  9. },
  10. methods: {
  11. ...mapMutations({
  12. handleAddClick: 'mutationsAddCount',
  13. handleReduceClick: 'mutationsReduceCount'
  14. }),
  15. ...mapActions({
  16. handleActionsAdd: 'actionsAddCount',
  17. handleActionsReduce: 'actionsReduceCount'
  18. })
  19. // handleAddClick(n){
  20. // this.$store.commit('mutationsAddCount',n);
  21. // },
  22. // handleReduceClick(n){
  23. // this.$store.commit('mutationsReduceCount',n);
  24. // },
  25. // handleActionsAdd(n){
  26. // this.$store.dispatch('actionsAddCount',n)
  27. // },
  28. // handleActionsReduce(n){
  29. // this.$store.dispatch('actionsReduceCount',n)
  30. // }
  31. },
  32. computed: {
  33. count(){
  34. return this.$store.getters.getterCount
  35. }
  36. }
  37. }
  38. </script>

同理,getters和 state也可以使用 mapState,mapGetters

如果你更懒的话,我们可以使用数组,而非对象,或者es6里面的对象简写方式

就像这种

最后,如果大家发现有什么问题,或者错误的地方,欢迎留言交流。

如果你的才华还实现不了你的野心,那就静下心来,埋头苦干。有志者事竟成破釜成舟百二秦关终属楚,苦心人天不负卧薪尝胆三千越甲可吞吴!

https://www.cnblogs.com/chinabin1993/p/9848720.html的更多相关文章

  1. 访问路径:https://i.cnblogs.com/posts?categoryid=925678

    https://i.cnblogs.com/posts?categoryid=925678

  2. URL https://i.cnblogs.com/EditPosts.aspx?opt=1

    URL url = new URL("https://i.cnblogs.com");URL url1 = new URL(url, "EditPosts.aspx?op ...

  3. 随笔二-https://www.cnblogs.com/shang1680/p/9657994.html

    作业要求来自https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 GitHub远程仓库的地址:https://github.com/ ...

  4. 211806189杨昊辰 https://www.cnblogs.com/honey1433223/

    211806189杨昊辰 https://www.cnblogs.com/honey1433223/

  5. https://www.cnblogs.com/h2zZhou/p/5440271.html

    https://www.cnblogs.com/h2zZhou/p/5440271.html

  6. https://www.cnblogs.com/soundcode/p/4174410.html

    https://www.cnblogs.com/soundcode/p/4174410.html 1.首先要在服务器端新建一个网站axpx页 然后再网站的后台写代码获取winform传过来的文件名. ...

  7. https://www.cnblogs.com/yudanqu/p/9467803.html

    https://www.cnblogs.com/yudanqu/p/9467803.html

  8. 转发自:一像素 十大经典排序算法(动图演示)原链接:https://www.cnblogs.com/onepixel/articles/7674659.html 个人收藏所用 侵删

    原链接:https://www.cnblogs.com/onepixel/articles/7674659.html     个人收藏所用   侵删 0.算法概述 0.1 算法分类 十种常见排序算法可 ...

  9. @无痕客 https://www.cnblogs.com/wuhenke/archive/2012/12/24/2830530.html 通篇引用

    无痕客 https://www.cnblogs.com/wuhenke/archive/2012/12/24/2830530.html 关于Async与Await的FAQ 关于Async与Await的 ...

随机推荐

  1. java中Class.getMethods()和Class.getDeclaredMethods()的区别

    在java中,可以根据Class类的对象,知道某个类(接口)的一些属性(成员 ,方法,注释,注解)等.由于最近的工作中用到了这些,其中需要在代码中格局反射知道某些类的方法,查看文档的时候,看到了get ...

  2. redis安装到本地服务的方法

    要安装Redis,首先要获取安装包. Windows的Redis安装包需要到以下GitHub链接找到. 链接:https://github.com/MSOpenTech/redis 打开网站后,找到R ...

  3. 请问在一个固定div大小里面,图片右移动,超出div容器的图片给隐藏,怎么设定?

    如图,让图片移动,溢出的图片被隐藏,怎么设置? overflow: hidden;

  4. windows10 自动配置切换IP

    办公室与家里的ip网段不一样.每次都要来回修改本地无线WLAN IP段.写了个脚本bat,自动配置WLAN IP,方便切换. 建立 auto-set-ip.bat,保存格式需为ANSI,否则中文会乱码 ...

  5. 任意两点间的最短路问题(Floyd-Warshall算法)

    /* 任意两点间的最短路问题(Floyd-Warshall算法) */ import java.util.Scanner; public class Main { //图的顶点数,总边数 static ...

  6. JUC 一 CyclicBarrier 与 Semaphore

    java.util.concurrent CyclicBarrier简介 CyclicBarrier:可重用屏障/栅栏 类似于 CountDownLatch(倒计数闭锁),它能阻塞一组线程直到某个事件 ...

  7. Delphi 中多线程同步的一些处理方法

    Delphi 中多线程同步的一些处理方法   当创建了多个线程,并且多个线程都要访问同一资源,,就有可能出现混乱,于是用Synchronize来控制,使同一时间只有一个线程使用那部分资源,Synchr ...

  8. 在linux中的rpm -ivh 是干什么的呢?

    在linux中的rpm -ivh 是干什么的呢?   RMP 是 LINUX 下的一种软件的可执行程序,你只要安装它就可以了.这种软件安装包通常是一个RPM包(Redhat Linux Packet ...

  9. CSS3:CSS3 边框

    ylbtech-CSS3:CSS3 边框 1.返回顶部 1. CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. ...

  10. CSS3:教程

    ylbtech-CSS3:教程 1.返回顶部 1. CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3! ...