我们要实现的很简单,就是点击+1的count加一,点击-1的时候count-1

  一、mutation

  在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. 现在test.js添加mutation.

  1. const store = new Vuex.Store({
  2. state: {
  3. count:0
  4. },
  5. mutations: {
  6. // 加1
  7. increment(state) {
  8. state.count++;
  9. },
  10. // 减1
  11. decrement(state) {
  12. state.count--
  13. }
  14. }
  15. })

Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写

  1. mutations: {
  2. // 加1
  3. INCREMENT(state) {
  4. state.count++;
  5. },
  6. // 减1
  7. DECREMENT(state) {
  8. state.count--
  9. }
  10. }

二、action

action去commit mutations, 所以还要定义action. test.js 里面添加actions.

  1. const store = new Vuex.Store({
  2. state: {
  3. count:0
  4. },
  5. mutations: {
  6. // 加1
  7. INCREMENT(state) {
  8. state.count++;
  9. },
  10. // 减1
  11. DECREMENT(state) {
  12. state.count--
  13. }
  14. },
  15. actions: {
  16. increment(context) {
  17. context.commit("INCREMENT");
  18. },
  19. decrement(context) {
  20. context.commit("DECREMENT");
  21. }
  22. }
  23. })

action 和mutions 的定义方法是类似的,我们要dispatch 一个action, 所以actions 肯定有一个名字,dispatch action 之后它要做事情,就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context,  它是一个store 实例,通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性, context.commit 就会执行commit命令。

  其实actions 还可以简写一下, 因为函数的参数是一个对象,函数中用的是对象中一个方法,我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions

  1. actions: {
  2. increment({commit}){
  3. commit("INCREMENT")
  4. },
  5. decrement({commit}){
  6. commit("DECREMENT")
  7. }
  8. }

三、dispatch  action

  现在就剩下dispatch action 了。什么时候dispatch action 呢? 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.

  这个时候我们需要新建一个操作组件,我们暂且命名为test.vue

  1. <template>
  2. <div>
  3. <div>
  4. <button @click="add">+1</button>
  5. <button @click="decrement">-1</button>
  6. </div>
  7. </div>
  8. </template>

然后,我们在methods里面获取这两个操作事件

  1. <script>
  2. export default {
  3. methods: {
  4. increment(){
  5. this.$store.dispatch("increment");
  6. },
  7. decrement() {
  8. this.$store.dispatch("decrement")
  9. }
  10. }
  11. }
  12. </script>

当然上面这种写法比较麻烦,vuex还给我我们提供了mapActions这个函数,它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。

  1. <script>
    import {mapActions} from 'vuex'
  1. export default {
  2. methods: {
  3. ...mapActions(['increment', 'decrement'])
  4. }
  5. }
  6. </script>
如果事件处理函数名字和action的名字不同,给mapActions
提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
  1. <script>
  2. import {mapActions} from 'vuex'
  3. export default {
  4. methods: {
  5. // 这中写法虽然可行,但是比较麻烦
  6. // 这时vue 提供了mapAction 函数,
  7. // 它和mapState 是一样的,把我们的 action 直接映射到store 里面的action中。
  8. // increment () {
  9. // this.$store.dispatch('increment')
  10. // },
  11. // decrement () {
  12. // this.$store.dispatch('decrement')
  13. // }
  14. // 下面我们使用一种比较简洁的写法
  15. // ...mapActions(['increment', 'decrement'])
  16. /**
  17. 如果事件处理函数名字和action的名字不同,给mapActions
  18. 提供一个对象,对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。
  19. */
  20. // 这里实际是为了改变事件的名字
  21. ...mapActions(['decrement']),
  22. ...mapActions({
  23. add: 'increment'
  24. })
  25. }
  26. }
  27. </script>

这时候我们单击按钮,就可以看到count 发生变化。

最后附一张简单的图形解析,看起来应该能更直观一点

vuex----mutation和action的基本使用的更多相关文章

  1. vuex mutation,action理解

    1. 在store中分别注册mutation和action,action中用commit同步调用mutation来执行修改state,但是在组件中则使用dispatch异步调用action 2. 通俗 ...

  2. 前端技术之:如何在vuex状态管理action异步调用结束后执行UI中的方法

    一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...

  3. Vuex 的使用 State Mutation Getter Action

    import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); /*1.state在vuex中用于存储数据*/ var state={ cou ...

  4. vuex中mutation和action的详细区别

    const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...

  5. 【vuex】mutation和action的区别

    const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } ...

  6. 06-vue项目02:vuex、Mutation、Action、ElementUI、axios

    1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...

  7. vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  8. 【14】vuex2.0 之 mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  9. (转)vuex2.0 基本使用(2) --- mutation 和 action

    我们的项目非常简单,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1. 1, mutation The only way to actually change state ...

  10. mutation与action

    mutation 作用: 更改state的状态 说明: 每个mutation对象都有字符串类型(type)与回调函数,在回调函数内进行状态修改,回调函数的第一个参数为state eg: mutatio ...

随机推荐

  1. 深入理解JMM(Java内存模型) --(四)volatile

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个监视器锁对这 ...

  2. 计算属性 computed

    计算属性 computed 计算缓存 vs Methods <div id="example"> <p>Original message: "{{ ...

  3. http-2.2

    HTTP-2.2 httpd 配置文件的组成: grep "Section" /etc/httpd/conf/httpd.conf ### Section 1: Global En ...

  4. js滚轮事件需要注意的兼容性问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. golang——database/sql包学习

    1.database/sql包 sql包提供了保证SQL或类SQL数据库的泛用接口. 使用sql包时必须注入(至少)一个数据库驱动. (1)获取mysql driver:go get -v githu ...

  6. working hard to be a professional coder

    1:read 2 : code 3 : 勤奋 4:技术栈 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟.未来前端在已经趋向成熟的技术方向上面将会 ...

  7. 【原创】利用doxygen来管理项目文档或注释

    一.doxygen应用场景: doxygen可以用来管理目前主流的编程语言的注释而形成文档系统.(包括C, C++, C#, Objective-C, IDL, Java, VHDL, PHP, Py ...

  8. vue 父子组件双向绑定

    vue组件有2大特性: 1.全局组件和局部组件 2.父子组件的数据传递 接下来直接用demo直接看如何传值(静态传值) father.vue <template> <div> ...

  9. ThinkPHP系统流程

    1.用户通过入口文件访问控制器2.控制器从模型层中提取数据3.控制器将数据返回模板页面

  10. tomcat日志详释

    1.tomcat的日志分类: 一是运行中的日志,它主要记录运行的一些信息,尤其是一些异常错误日志信息 . 二是访问日志信息,它记录的访问的时间,IP ,访问的资料等相关信息. 2.tomcat的日志目 ...