主要区别： dispatch VS commit

dispatch:含有异步操作，数据提交至 actions

写法示例：
this$.store.dispatch('SETNAV', res.data);

commit:同步操作，数据提交至 mutations

写法示例：
this$.store.commit('setNav', res.data);

重新捋一捋vuex

/*
 * @Author: sheep669
 * @Description: vuex状态管理器
 * @Date: 2022-06-26 21:46:01
 */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //存储变量的地方
  state: {
    nav: [],
  },
  //获取变量的地方
  getters: {
    navData: state => state.nav
  },
  //定义操作数据的方法 
  mutations: {
    setNav(state, data) {
      state.nav = data
    }
  },
  // 执行操作数据方法的地方
  actions: {
    SETNAV({ commit }, data) {
      commit('setNav', data)
    }
  },
  modules: {}
})

获取vuex数据 写在computed中

import {mapState, mapGetters} from 'vuex'
export default {
data () {
return {
}
},
computed: {
...mapState(['nav']),
...mapGetters(['navData'])
},

操作数据 写在methods中

methods: {
...mapMutations(['setNav']), //调用mutations中方法的第一种方式
this.setNav()
}

···等价···

methods: {
this.$store.commit('setNav') //调用mutations中方法的第二种方式
}

含模块 Modules

操作数据

/*
 * @Author: sheep669
 * @Description: 登录状态模块
 * @Date: 2022-07-20 22:16:48
 */
export default {
    namespaced: true,
    state: {
        userinfo: {
            user: '',
            token: ''
        }
    },
    getters: {
       allInfo: state => state.userinfo
    },
    mutations: {
        //设置用户信息
        setUser(state, data) {
            state.userinfo = data;
        },
    },
    actions: {}
}

...mapMutations("loginModule", ["setUser"]),

获取数据

import { mapState , mapGetters } from "vuex";

computed: {
   ...mapState("loginModule", ["userinfo"]),
   ...mapGetters("loginModule",["allInfo"])
},

总结

允许没有getters,使用state获取数据 但不建议

允许没有actions,使用mutations操作数据 但不建议

获取数据

state     ===>...mapState([])

getters   ===>...mapGetters([])

操作数据

mutations
    |
    v
    V
...mapMutations([])
or
this$.store.commit('XXX', res.data);

actions ===>this$.store.dispatch('XXX', res.data);

重新捋一捋Vuex

总结