vuex直接修改state、commit和dispatch修改state的用法及区别说明

更新时间：2024年08月31日 09:52:33 作者：是大林的林吖

这篇文章主要介绍了vuex直接修改state、commit和dispatch修改state的用法及区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vuex直接修改state、commit和dispatch修改state的区别

1）可以直接使用 this.$store.state.变量 = xxx;

2）通过commit修改state

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    name:''
  },
  mutations: {//类似method
    SET_NAME(state, name) {
      state.name = name;
    }
  }

使用：commit提交触发mutations里方法

this.$store.commit("SET_NAME", 'xlt');

3）通过dispatch修改state

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    name:''
  },
  mutations: {//类似method
    SET_NAME(state, name) {
      state.name = name;
    }
  },
  actions: {//类似method
    set_name({ commit }, name) {
    	commit('SET_NAME', name)
  	}
  }

使用：dispatch提交触发actions里方法

this.$store.dispatch("set_name", 'xlt');

区别

commit方式是同步操作
dispatch方式是异步操作

总结

都可以修改state里的变量，并且是响应式的（能触发视图更新）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

3分钟带你快速认识Vue3中的v-model
model在vue里面实现双向绑定,通过父节点向子节点传递参数,子节点通过操作再回传给父节点的变量,有点像prop和$emit组合使用,下面这篇文章主要给大家介绍了关于Vue3中v-model的相关资料,需要的朋友可以参考下
2022-11-11
Vue文件配置全局变量的实例
今天小编就为大家分享一篇Vue文件配置全局变量的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue.extend和VueComponent的关系源码解析
这篇文章主要为大家详解了Vue.extend和VueComponent的关系源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
Nuxt3动态导入图片(本地)src实现过程
这篇文章主要介绍了Nuxt3动态导入图片(本地)src实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2026-03-03
vue实现兄弟组件之间跳转指定tab标签页
这篇文章主要介绍了vue实现兄弟组件之间跳转指定tab标签页，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue中slot（插槽）的介绍与使用
这篇文章主要给大家介绍了关于vue中slot（插槽）的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
Vue实现侧边导航栏于Tab页关联的示例代码
本文主要介绍了Vue实现侧边导航栏于Tab页关联的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
vue实现给div绑定keyup的enter事件
这篇文章主要介绍了vue实现给div绑定keyup的enter事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue3 组件的开发详情
这篇文章主要介绍了Vue3组件的开发，上一篇文章我们价绍了Vue3（三）网站首页布局开发，今天继续上篇内容展开组件的开发,需要的朋友可以参考一下
2021-11-11
vue中渲染对象中属性时显示未定义的解决
这篇文章主要介绍了vue中渲染对象中属性时显示未定义的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07