vuex全局配置

1.store-》module-》config文件内容

/**
 * 获取一些全局配置模块
 */
import { ActionTree, MutationTree } from 'vuex'

import requestHandle from '@/utils/handle'
import { getCities, getConfig, msgIndicator } from '@/api/base'
import { getProfile, getpaymentAccount } from '@/api/user'

export interface ConfigState {
  cacheNames:string[],
  config:Record<string, any>,
  cities:Array<Record<string, any>>,
  hotCities:Array<Record<string, any>>,
  user:Record<string, any>,
  city:Record<string, any>,
  account:Record<string, any>,
  show:Boolean,
  messageNum:Number,
  isShow:Boolean,
  wristWatch:Boolean
}

const initState = ():ConfigState => ({
  cacheNames:[],
  config: {},
  cities: [],
  hotCities: [],
  user:{},
  city:{},
  account:{ balance:0 },
  show:false,
  messageNum:0,
  wristWatch:false,
  isShow:false
})

const actions: ActionTree<ConfigState, any> = {
  /**
   *  配置全局获取的配置
   */
  getConfig({ dispatch }) {
    Promise.all([
      dispatch('cities'),
      dispatch('config')
    ])
  },
  getUserInfo({ dispatch }) {
    Promise.all([
      dispatch('user'),
      dispatch('account'),
      dispatch('getUnreadMessageCount')
    ])
  },
  async config({ commit, dispatch }) {
    const { httpStatus, data = {} } = await getConfig()
    if (httpStatus === 200) {
      const config = data
      commit('save', {
        config
      })
      await dispatch('getUserInfo')
    }
    requestHandle(httpStatus, data, () => {
      dispatch('config')
    })
  },
  async cities({ commit }) {
    const { httpStatus, data = {} } = await getCities()
    if (httpStatus === 200) {
      const { cities, hotCities = [] } = data
      commit('save', {
        cities,
        hotCities
      })
    }
  },
  async user({ commit }) {
    const { httpStatus, data = {} } = await getProfile()
    if (httpStatus === 200) {
      const user = data
      commit('save', {
        user
      })
    }
  },
  async account({ commit }) {
    const { httpStatus, data = {} } = await getpaymentAccount()
    if (httpStatus === 200) {
      const account = data
      commit('save', {
        account
      })
    }
  },
  async getUnreadMessageCount({ commit }) {
    const { httpStatus = 200, data = {} } = await msgIndicator()
    if (httpStatus === 200) {
      const { unreadMessageCounts } = data
      if (unreadMessageCounts) {
        let messageNum = 0
        unreadMessageCounts.forEach(({ count }) => {
          messageNum += count
          commit('save', {
            messageNum
          })
        })
      }
    }
  }

}

const mutations: MutationTree<ConfigState> = {
  save(state, payload) {
    Object.assign(state, payload)
  },
  updateUser(state, user) {
    state.user = user
  },
  updateAccount(state, account) {
    state.account = account
  },
  updateWristWatchIsShow(state, isShow) {
    state.isShow = isShow
  },
  updateWristWatch(state, wristWatch) {
    state.wristWatch = wristWatch
  },
  updateShow(state, show) {
    state.show = show
  },
  updateCurrentCity(state, city) {
    state.city = city
  },
  addCacheName(state, { name }) {
    if (state.cacheNames.indexOf(name) === -1) {
      state.cacheNames.push(name)
    }
  },
  removeCacheName(state, { name }) {
    state.cacheNames = state.cacheNames.filter(v => v !== name)
  },
  reset(state) {
    Object.assign(state, initState())
  }
}

const namespaced = true

export default {
  namespaced,
  state: initState,
  actions,
  mutations
}

2.store->index.ts文件内容

import Vue from 'vue'
import Vuex, { StoreOptions } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

import config, { ConfigState } from './modules/config'
// import category, { CategoryState } from './modules/category'
// import prebill, { PrebillState } from './modules/prebill'
import platform from '@/utils/platform'

Vue.use(Vuex)

interface RootState {
  config: ConfigState
 // category: CategoryState
 // prebill: PrebillState
}


const store: StoreOptions<RootState> = {
  modules: {
    config,
    // category,
   // prebill
  },
  plugins: [
    createPersistedState({
      storage: platform.isWechat
        ? window.sessionStorage : window.localStorage
    })
  ]
}

export default new Vuex.Store<RootState>(store)

3.页面组件用到store数据时如下：

import { namespace } from 'vuex-class'
const Config = namespace('config')
export default class Index extends Vue {
  @Config.State('user') user
  @Config.Mutation('方法名')  方法名
  @Config.Actions('方法名')  方法名
}