vue中在vuex里面的this.$store.dispatch方法

1，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作

2，Vuex分成五个部分：

1.State：单一状态树

2.Getters：状态获取

3.Mutations：触发同步事件

4.Actions：提交mutation，可以包含异步操作

5.Module：将vuex进行分模块

3.代码示例：

3.1.首先我们在store里面modules里写个文件ssosignurl.js,来写我们需要的代码，

import { version } from '@/api/user'
const state = {
  ssoUrl: ''
}

const mutations = {
  SET_SSOURL: (state, ssoUrl) => {
    state.ssoUrl = ssoUrl
  }
}
const actions = {
  versionsso({ commit }, state) {
    const sso = state
    console.log(sso)
    return new Promise((resolve, reject) => {
      version(sso).then(response => {
        const { data } = response
        const { ssoUrl } = data
        console.log(data, ssoUrl)
        commit('SET_SSOURL', ssoUrl)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3.2.在getters.js模块中将我们需要数据暴露出来

const getters = {
  ssoUrl: state => state.ssosignurl.ssoUrl, 将ssosignurl中的路由模块开放出来
}
export default getters

3.3在index.js 中将其挂载出来，可供其全局使用

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

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    ssosignurl
  },
  getters
})

export default store

3.4在使用的时候我们可以直接用this.$store.dispatch（）方法

   async handleLogin() {
      const { roles } = await this.$store.dispatch('ssosignurl/versionsso')
      console.log(roles)
    },

3.5我们可以使用getters中暴露的参数，可以全局使用

import store from '@/store'
const ssoUrl = store.getters.ssoUrl
console.log(ssoUrl)

小结：根据此步骤可以做到数据共享，在任何地方都能拿到我们需要的数据。