VUEX用法

一、引入，并区分模块

import Vuex from 'vuex'
import Vue from 'vue'
import user from './modules/user'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters: {
    user: state => state.user,
  }
})
export default store

二、user文件实例用法

const user = {
  state: {
    nickName: ''
  },
  mutations: {
    SET_NICK_NAME: (state, nickName) => {
      state.nickName = nickName
    },
  },
  actions: {
      // 切换部门
    async ChangeDept({ commit, state }, deptId) {
      return new Promise((resolve, reject) => {
        changeDept(process.env.VUE_APP_CLIENT_KEY + ' ' + state.token, deptId).then(({ code, data, msg }) => {
          resolve({ code, data, msg })
        }).catch(error => {
          reject(error)
        })
      })
    },
  }
}
export default user

三、普通调用赋值

this.$store.commit('user/SET_NICK_NAME', user.nickName)

四、异步调用actions函数

this.$store.dispatch('ChangeDept', deptId).then(({ code, msg }) => {
       if(code != 200) return this.$message.error(msg)
})

五、取值

import { mapState, mapActions, mapGetters } from "vuex";

this.$store.state.user.user //普通取值

computed: {
  ...mapGetters(['user']),
  ...mapState({
    userId: (state) => state.user.user.userName
  })
},
methods: {
  ...mapActions("user", ["ChangeDept"]),
},
async created() {
    this.ChangeDept();
},