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

七零八落

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

1）可以直接使用 this.$store.state.变量 = xxx;
2）通过commit修改state

1. import Vue from 'vue'
   
2. import Vuex from 'vuex'
   
3. Vue.use(Vuex)
   
4. export default new Vuex.Store({
   
5.   state: {
   
6.     name:''
   
7.   },
   
8.   mutations: {//类似method
   
9.     SET_NAME(state, name) {
   
10.       state.name = name;
    
11.     }
    
12.   }

复制代码

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

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

复制代码

3）通过dispatch修改state

1. import Vue from 'vue'
   
2. import Vuex from 'vuex'
   
3. Vue.use(Vuex)
   
4. export default new Vuex.Store({
   
5.   state: {
   
6.     name:''
   
7.   },
   
8.   mutations: {//类似method
   
9.     SET_NAME(state, name) {
   
10.       state.name = name;
    
11.     }
    
12.   },  actions: {//类似method    set_name({ commit }, name) {            commit('SET_NAME', name)          }  }

复制代码

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

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

复制代码

区别

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

总结

都可以修改state里的变量，并且是响应式的（能触发视图更新）
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/326756b2v.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！