vuex中 mutation和action的区别和使用

utations 类似于事件,用于提交 Vuex 中的状态 state

action 和 mutations 也很类似,主要的区别在于mutations 只能是同步操作,,action 可以包含异步操作,而且可以通过 action 来提交 mutations

mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state、getters

Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

分发调用action:

this.$store.dispatch('action中的函数名',发送到action中的数据)

在组件中提交 Mutation:
this.$store.commit(“mutation函数名”,发送到mutation中的数据)

在action中提交mutation :

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {    //官方给出的指定对象, 此处context可以理解为store对象
      context.commit('increment');
    }
  }
})
// 第一种写法简写形式
  const actions = {
    action的函数名({commit}) { 
      commit(“mutation函数名”, value);   //调用mutation中的函数
      //此处value可以是对象,可以是固定值等
    }
  }
  // 第二种形式
  const actions = {
    action中的函数名(context) {
      //context 官方给出的指定对象, 此处context可以理解为store对象
      context.commit(“mutation函数名”, value);     //调用mutation中的函数
    }
  }

posted @   王二疯  阅读(8199)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示