vuex实战

1. 页面获取全局配置文件数据
登录页面底部展示放置在全局配置文件的相关数据，如软件版权信息等
src/config/index.js与首页相关配置信息如下：

/**
* 是否显示设置的底部信息
*/
showFooter: true,

/**
* 底部文字，支持html语法
*/
footerTxt: '© 2020 Zhou Yi 个人博客',

/**
* 备案号
*/
caseNumber: '渝ICP备18005431号'

src/store/index.js ，vuex存储

import Vue from 'vue'
import Vuex from 'vuex' //这个才是做数据存储的
import user from './modules/user'
import setting from './modules/setting'

Vue.use(Vuex)
//存储用户模块和设置模块
const store = new Vuex.Store({
  modules: {
    user,
    setting
  },
})

export default store

src/store/modules/setting.js,设置模块

import Config from '@/config'

const settings = {
  state: {
    showRightPanel: false,
    tagsView: Config.tagsView,
    fixedHeader: Config.fixedHeader,
    sidebarLogo: Config.sidebarLogo,
    settingBtn: Config.settingBtn,
    uniqueOpened: Config.uniqueOpened,
    showFooter: Config.showFooter,
    footerTxt: Config.footerTxt,
    caseNumber: Config.caseNumber
  },
  mutations: {
    CHANGE_SETTING: (state, { key, value }) => {
      if (state.hasOwnProperty(key)) {
        state[key] = value
      }
    }
  },
  actions: {
    changeSetting({ commit }, data) {
      commit('CHANGE_SETTING', data)
    }
  }
}
export default settings

入口main.js中引入store

import store from './store'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

src/views/login.vue，登录页终于可以调用配置数据了

2. 请求异步操作结束处理
   vuex中的dispatch和commit的使用：

dispatch 异步操作 this.$store.dispatch('actions的方法'，arg)

commit 同步操作 this.$store.commit('mutations的方法'，arg)

​ Vuex结合 Promise 处理异步请求结束

  ```js

updateLoadMenus({ commit }) {
return new Promise((resolve, reject) => {
commit('SET_LOAD_MENUS', false)
})
}
```