Vuex入门(四)—— action和

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { 
    count: 1,
  },
  mutations: { //  类似于计算属性  computed
    increment(state) { //  把上面state对象当参数传入,取对象里面的进行操作
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
  getters: {
  },
  actions: {		//	action`第一种(context) 第二种({commit,dispatch ,state  })`
    add(context) {
      return new Promise(resolve => {
        setTimeout(() => {
          context.commit('increment');
          resolve();
        }, 1000)
      });
    },
    // add(context) {  执行异步加加法mutations里面调用  111111111	 add可以更改为decrement在页面组件可以直接缩写为'decrement'
    //   setTimeout(() => {
    //     context.commit('increment')
    //   }, 1000) // 1s秒后触发这个方法
    // },
    // add({commit}){         //  111简写方法，解构赋值    一般开发用的多
    //   setTimeout(() => {
    //     commit('increment')
    //   },1000)// 1s秒后触发这个方法
    // },
    reduce(context) { // 执行异步减减法mutations里面调用   2222222222	reduce可以更改为increment在页面组件可以直接缩写为'increment'
      setTimeout(() => {
        context.commit('decrement')
      }, 1000) // 1s秒后触发这个方法
    },
    // reduce({commit}){    // 222 简写方法，解构赋值    一般开发用的多
    //   setTimeout(() => {
    //     commit('decrement')
    //   },1000)// 1s秒后触发这个方法
    // }
    // 33333333333组合写法调用上一个action函数
    // async actionA ({ commit }) {
    //   commit('gotData', await getData())
    // },
    // async actionB ({ dispatch, commit }) {
    //   await dispatch('actionA') // 等待 actionA 完成
    //   commit('gotOtherData', await getOtherData())
    // }
   
  },
  modules: {}
})

二.action.vue 实现异步action点击加法或减法1s后执行

<template>
  <div>
    <h1>action案例 1s后加或者减</h1>
    <div style="display: flex">
      <button style="width: 50px" @click="increment">+</button>
      {{ count }}
      <button style="width: 50px" @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count; // 取store.js里面state的count值
    },
  },
  methods: {
    increment() {
      this.$store.dispatch("add"); //  调用action里面方法   语法:this.$store.dispatch("XXX");   xxx 为action自定义函数名 触发方法
    },
    decrement() {
      this.$store.dispatch("reduce");
    },

    // 传参数
    // //  1.以载荷形式分发
    // this.$store.dispatch('incrementAsync', {
    //     amount: 10
    // })
    // // 2.以对象形式分发
    // this.$store.dispatch({
    //     type: 'incrementAsync',
    //     amount: 10
    // })
  },
};
</script>

效果如下图

三.mapActions.vue …mapActions实现异步action点击加法或减法1s后执行

引入import { mapActions } from ‘vuex’

代码如下：

<template>
  <div>
    <h1>...mapActions案例 1s后加或者减</h1>
    <div style="display: flex">
      <button style="width: 50px" @click="increment">+</button>
      {{ count }}
      <button style="width: 50px" @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'   //  别忘记引入哦~~~
export default {
  computed: {
    count() {
      return this.$store.state.count; // 取store.js里面state的count值
    },
  },
  methods: {
    // 第一种写法
    // ...mapActions([
    //   'increment'  ,// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`   想要这样缩写写前提store.js里面action里面函数名和绑定class名字相同才可以
    //   'decrement'
    // ])
    // 第二种写法
    ...mapActions({
      increment: 'add', // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`  
      decrement:'reduce'
    }),
  },
};
</script>

效果和上面图一样

推荐博主写的比较清晰

1.https://blog.csdn.net/weixin_35955795/article/details/57412181?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2
2.https://www.cnblogs.com/greatdesert/p/11424516.html
3.https://blog.csdn.net/qq_41820577/article/details/100530155?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164722778616780357249571%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164722778616780357249571&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-100530155.pc_search_result_cache&utm_term=actions&spm=1018.2226.3001.4187
4.https://blog.csdn.net/muzidigbig/article/details/83789415

感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-r2SrU0tz-1719229038861)]