vuex进阶用法3.0 (mutation和action)

许你满眼星辰

已于 2022-07-08 11:04:08 修改

阅读量740

点赞数 1

文章标签： vue.js vuex js

于 2022-07-04 14:43:13 首次发布

本文链接：https://blog.csdn.net/m0_58849641/article/details/125598402

版权

本文深入探讨Vuex的mutation和action使用，包括同步的mutation页面调用以及异步的action调用。通过实例展示了如何在页面中使用this.$store.commit和this.$store.dispatch，并解释了Vuex的数据流：点击->actions->mutations->state->返回数据的过程。

摘要由CSDN通过智能技术生成

这边不详细介绍vuex的下载,引用之类的了,可以看我的博客里面的vuex1.0

1.简单的mutation用法(同步)

注意:mutation用法要配合vuex的state一起用,简单来说,mutation相当于vue中的methods.

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        count: 0
    },
    mutations:{
        addNum(state,step){
            state.count+=step
        }
    }
    
})

mutation在页面使用

//静态页面
{
  {count}}
<button @click="changeNum">点击数量</button>



//JS部分
import { mapState } from 'vuex'

computed:{
   ...mapState(['count']) 
        }


methods:{
  changeNum(){
      this.$store.commit('addNum',1)    
             }
        }

讲解:this.$store.commit('addNum',1)就可以直接调