美文网首页
VueX自动化注册

VueX自动化注册

作者: 王二麻子88 | 来源:发表于2022-04-08 09:48 被阅读0次

    在 store/index.js 中写入

    const modulesFiles = require.context('./modules', true, /\.js$/)
    // you do not need `import app from './modules/app'`
    // it will auto require all vuex module from modules file
    const modules = modulesFiles.keys().reduce((modules, modulePath) => {
      // set './app.js' => 'app'
      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
      const value = modulesFiles(modulePath)
      modules[moduleName] = value.default
      return modules
    }, {})
    
    const store = new Vuex.Store({
      modules,
      getters,
    })
    
    export default store
    

    此时只要在 store/modules 目录下定义相应的内容就行了
    如在 store/modules/app.js 定义VueX模块的内容

    const state = {
      sidebar: {
        opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : false,
        withoutAnimation: false
      },
      device: 'desktop',
      language: getLanguage(),
      loading: {},
    }
    
    const mutations = {
      SET_ROUTER_BEFORE_TIME: (state, time) => {
        state.routerBeforeTime = time
      },
    }
    
    const actions = {
      setRouterBeforeTime({ commit }, time) {
        commit('SET_ROUTER_BEFORE_TIME', time)
      },
      setCurClueCode({ commit }, clueObj) {
        commit('SET_CUR_CLUE_CODE', clueObj)
      },
    }
    
    export default {
      namespaced: true,
      state,
      mutations,
      actions
    }
    

    一般调用

    this.$store.dispatch('app/setCurClueCode', arguments)
    

    一般取值

    this.$store.state.app.device
    

    相关文章

      网友评论

          本文标题:VueX自动化注册

          本文链接:https://www.haomeiwen.com/subject/reoesrtx.html