IT俱乐部 JavaScript vuex直接修改state、commit和dispatch修改state的用法及区别说明

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里的变量,并且是响应式的(能触发视图更新)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持IT俱乐部。

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/13146.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部