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里的变量，并且是响应式的（能触发视图更新）
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用vue如何构建一个自动建站项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue实现的下拉框功能,涉及vue.js数据读取、遍历、事件响应等相关操作技巧,需要的朋友可以参考下2019-01-01
本文通过实例代码给大家介绍了Vue中util的工具函数，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
本文主要介绍了element table跨分页多选及回显的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要为大家介绍了Vue实现电商网站商品放大镜效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue路由传参的基本实现方式,结合实例形式总结分析了vue.js路由传参的三种实现方式,包括params显示传参、不显示参数以及query显示参数传参,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了vue iview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧2023-08-08
这篇文章主要介绍了vue如何动态生成andv图标问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论