vuex 多个模块应用

 

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)


const modulesFiles = require.context('./modules', true, /\.js$/)

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
}, {})
console.log(modules)
const store = new Vuex.Store({
  modules,
  getters
})

export default store

app.js

const state = {
  language: getLanguage()
}

const mutations = {
   SET_LANGUAGE: (state, language) => {
    state.language = language
    Cookies.set('language', language)
  },
}

const actions = {
   setLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
   },
}

export default {
  namespaced: true,  //重点
  state, 
  mutations,
  actions
}

 

传递的参数是：模块名字+actions的方法名

其他页面调用app.js 模块的action 方法通过 this.$store.dispatch('app/setLanguage', lang)