vuex4 多模块的构建和使用

构建目录

|---store
| |---index.js
| |---modules 子模块目录
| └── test.js
| |--- gettes 根getters
| |--- actions 根actions
| |--- mutations 根mutation

index.js内容

import { createStore } from 'vuex'
import getters from './getters'

const files = require.context('./modules', false, /\.js$/)
const modules = {}
files.keys().forEach((key) => {
  modules[key.replace(/\.\/|\.js/g, '')] = files(key).default
})
// 导入所有vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突
Object.keys(modules).forEach(key => {
  modules[key].namespaced = true
})
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules,
  getters
})

getters.js

const getters = {
  testContent: state => state.app.testContent,
}
export default getters

test.js

const state = {
   testContent: false
}

const mutations = {
  TURN_TEST_CONTENT: (state, testContent) => {
    state.testContent = testContent
  }
}

const actions = {
  turnTestContent ({ commit }, { withoutAnimation }) {
    commit('TURN_TEST_CONTENT', withoutAnimation)
  }
}

export default {
  state,
  mutations,
  actions
}

使用

在调用子模块的state,mutations.actions都需要在加上子模块名，如下

• store.state.test.testContent
• store.commit('test/turnTestContent')
• store.dispatch('test/turnTestContent')