Vue-cli3.0+Vuex基础使用入门详解

学习Vue的时候，Vuex是其中必不可缺的一个知识点，在学习之后，发现Vuex其实也挺简单很容易上手，接下来就讲解一下如何在Vue-cli3.0中使用Vuex:

本示例的代码博主已经上传到github,如果有需要可以拉下来：github

Vuex是什么

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
• 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

• 每一个 Vuex 应用的核心就是 store（仓库）
• Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。(方便地跟踪每一个状态的变化)

 

什么时候使用Vuex

不适用场景：小型简单应用，用 Vuex 是繁琐冗余的，更适合使用简单的store模式

适用场景： 构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态，即多个组件共享状态：

• 多个视图依赖于同一状态

此时传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

• 来自不同视图的行为需要变更同一状态。

此时采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

在这些情况下就适合用Vuex进行全局单例模式管理

 
 

分步讲解Vuex

首先，vuex中有默认的五个核心概念：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。在组件中通过 this.$store.getters.xxx使用
• mutations：修改状态，并且是同步的。在组件中通过this.$store.commit(‘xxx’,params)使用。这个和我们组件中的自定义事件类似。
• actions：提交 mutation，异步操作。在组件中通过this.$store.dispath(‘xxx’)使用
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的，即将store分割为模块，使store对象不会太臃肿。这里我们就不解释了，用起来和上面的一样。官文示例

正式开始一步一步讲解：

首先通过vue-cli3创建一个项目（这里使用webpack模板）

vue create 项目名称

这里选择手动配置，在接下来的选择中将vuex选中即安装了Vuex，项目中便可使用，是不是很方便呢


项目创建成功后我们就可以进入store.js中编写代码，玩转Vuex啦

 

Vuex使用

State

vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过 this.$store.state来获取我们定义的数据；

首先在store.js中定义数据源count和age并初始化为0

在home.vue组件中通过this.$store.state.xxx获取

打开浏览器，发现已经获取到我们的数据

 
 

Getter

• Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
• 通过属性访问Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
  this.$store.getters.xxx
• Getters 可以用于监听、state中的值的变化，返回计算后的结果，这里我们修改store.js和home.vue文件如下

打开浏览器，发现已经通过getter获取到我们计算后的数据

 
 
 

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，并且Mutation 必须是同步函数

• 现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？ 没错！用mutations和actions，我们继续操作store.js文件
• 我们在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数。
  

其中第二个参数obj在官方文档就是载荷（payload），可以传入参数及对象。

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

接下来在home.vue中进行提交mutation，这里的num 就可以看做之前的obj载荷的值。

注：关于对象风格的提交方式，请查看官方文档

打开浏览器查看效果，此时我们便可以通过加减按钮进行同步的增加或减少count的值啦，每次加减的值为传入载荷num的值2：

 
 
 

Action

上面我们看到啦，通过提交mutation可以同步的更改 Vuex store 中的状态，但是在 mutation 中混合异步调用会导致你的程序很难调试，所以为了处理异步操作，我们继续看Action：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

接下来我们先在store.js中定义action来异步提交mutation

这里可以通过ES2015 的 参数解构 来简化代码,具体查看官方文档，特别简单，可以让我们少敲几行代码。

然后我们在home.vue中分发Action：

这里看起来好像比直接提交mutation麻烦，但是它却解决了异步的操作问题，而且熟练啦，其实也很简单

打开网页查看效果

由于我这里设置的异步操作是在两秒后执行，所以效果不太容易展示，若有需要，可去文头博主的github将代码拉下来自己执行查看效果。

到这里，如果全都看懂了，那么vuex就基本学明白啦，有兴趣的童鞋可以去官文深入了解。

动图效果演示

博主在室友的帮助下找到了一个gif动图工具 GifCam，可以很好地演示效果，大家可以去尝试下，很好用很轻便，接下来演示一下本示例的效果

 
 
接下来再介绍下各种辅助函数的用法，可以使我们更加方便的运用vuex

…mapState

 count(){
      return this.$store.state.count
    },

等价于

...mapState([
      'count'
    ]),

运行出来效果都是相同的，这里就不截图啦，可以自行尝试，只有多敲代码，才能真正记住。

 
 

…mapGetters

 getCount(){
      return this.$store.getters.getterAge
     }

等价于

...mapGetters([
      'getterAge'
    ])

 
 

…mapMutations

handlerAdd(){
      this.$store.commit('addCount',{
        num : 2
      })
    },
 handlerSub(){
      this.$store.commit('subCount',{
        num : 2
      })
    },

等价于

...mapMutations({
      handlerAdd: 'addCount',
      handlerSub: 'subCount'
    }),

ps：这里这样写并用大括号是为了将函数重新命名，即重新命名addCount和subCount'

  关于使用辅助函数后载荷的传参，直接在调用的地方进行传参便可

 
 

…mapActions

handlerAddasy(){
      this.$store.dispatch('addCountasy')
    },
    handlerSubasy(){
      this.$store.dispatch('subCountasy')
    }

等价于

...mapActions({
      handlerAddasy: 'addCountasy',
      handlerSubasy: 'subCountasy'
    })

和…mapMutations用法相似。

 
上面所有辅助函数皆未更改store.js中的内容

是不是很简单很方便呢，赶快动手试试吧
 
 
 
 
到此就结束啦，若有问题可以联系本人进行解决。

博文参考：
https://my.oschina.net/wangnian/blog/2055631
https://www.cnblogs.com/chinabin1993/p/9848720.html