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

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

本站所有资源来自于网络，仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您(转载者)自己承担！
如有侵犯您的版权，请及时联系3500663466#qq.com(#换@)，我们将第一时间删除本站数据。

THE END

Vue.js 前端开发编程开发
# vuex # state # commit # dispatch

目录

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

区别

总结