本文共 3725 字，大约阅读时间需要 12 分钟。

vuex 包含有五个基本的对象：

state：存储状态。也就是变量；

getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多； mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit(‘SET_AGE’, 18)。和vue中的methods类似。 actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch(‘nameAsyn’)。 modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。

import Vue from 'vue'import Vuex from 'vuex'import state from './state.js'import getters from './getters'import mutations from './mutations.js'import actions from './actions.js'//安装Vue Devtools调试工具https://blog.csdn.net/li22356/article/details/113092495//挂载Vuex,帮助手册https://www.jianshu.com/p/2e5973fe1223//模块化可参考https://www.jb51.net/article/150752.htmVue.use(Vuex);//创建VueX对象,单页面使用
{
  { $store.state.name }}
console.log(this.$store.state.name)//新增state对象Vue.set(state,"age",15)，删除Vue.delete(state,'age')const store = new Vuex.Store({  //存放数据,存放状态  //使用方法  state,  //加工state成员给外界  //state 当前VueX对象中的状态对象  // getters 当前getters对象，用于将getters下的其他getter拿来用  //组件使用this.$store.getters.fullInfo  getters,  //state成员操作,操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。  //组件调用this.$store.commit('SET_TOKEN','new token')挂载方法  //同步处理  mutations,  //异步处理  //组件中使用this.$store.dispatch('aEdit','new TOKEN')  actions});export default () => {  return store}

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({    //这里放全局参数，比如用户登录信息  state: {	token: "helloVueX",    name: "",    age: ""  },  mutations: {    //这里是set方法，比如对该数据的修改、增加、删除等等。    //组件调用this.$store.commit('SET_TOKEN','new token')挂载方法    SET_TOKEN: (state, token) => {	    state.token = token	    console.log(state.token);	  }  },  //getters 当前getters对象（可对对象进行二次更改），用于将getters下的其他getter拿来用,组件通过this.$store.getters.fullInfo拿来使用 getters: { 	 token: state => state.token,	  nameInfo(state) {	    return "姓名:" + state.name	  },	  fullInfo(state, getters) {	    return getters.nameInfo + '年龄:' + state.age	  } }, //异步处理//组件中使用this.$store.dispatch('aEdit','new TOKEN')  actions: {	   QQlogin({commit}, token) {	    return new Promise((resolve, reject) => {	      setToken(token);         //把token存放到cookie里	      commit('SET_TOKEN', token)     //commit调用mutations 数据	      resolve()	    })	  },	  aEdit(context, payload) {	    return new Promise((resolve, reject) => {	      setTimeout(() => {	        context.commit('SET_TOKEN', payload)	        resolve()	      }, 2000)	    })	  }  },  modules: {//这里是我自己理解的是为了给全局变量分组，所以需要写提前声明其他store文件，然后引入这里  }})

vuex，module间的方法调用

我们用vuex时通常会分功能创建多的module，单个module里的操作大家应该很清楚，那多个module之间怎么调用了？

详细代码：

现在我有两个module：user 和 menu,要在user中调用menu的actions方法，操作如下：

const user = {  state: {    permissions: []  },  mutations: {    SET_PERMISSIONS: (state, permissions) => {      state.permissions = permissions    }  },  actions: {    getPermissions({commit}) {      queryPermissions().then(res => {        sessionStorage.setItem('permissions', JSON.stringify(res))        this.dispatch('setPermissions', res); // 调本module里的方法      })    },    setPermissions({commit, dispatch, state, rootState}, data) {      commit('SET_PERMISSIONS', data); // 本module的commit      dispatch('setMenuData', data); // 调menu里的方法      console.log(rootState.menu.menus); // 取menu里的参数    }  }} export default userconst menu = {  state: {    menus: []  },  mutations: {    SET_MENUS: (state, data) => {      state.menus = data    }  },  actions: {    setMenuData({commit, state}, data) {      commit('SET_MENUS', data);    }  }}export default menu

解释：

actions里各个方法的第一个参数其实有很多属性，只是我们平时习惯了解构的写法，如setMenuData({commit, state},data)。当把第一个参数的值全输出，如setMenuData(param,data)，输出param会发现其中包含以下属性：