vuex modules用法

store/index.js

import { createStore } from 'vuex'

import moduleA from './modules/moduleA'

export default createStore({
  modules: {
    moduleA,
  }
})

store/module/moduleA.js

开启命名空间：namespaced:true

如果没有开启命名空间，state中的值需要使用模块名拿，其他方法全局挂载到了全局

export default {
    namespaced: true,
    state: {
        userName: 'moduleA'
    },
    mutations: {
        updateUserName (state) {
            state.userName = 'moduleAAAAA'
        }
    },
    actions: {
        updateUserName (ctx) {
            setTimeout(() => {
                // action内部不需要也模块名称
                ctx.commit('updateUserName')
            }, 1500)
        }
    }
}

App.vue

<template>
  <div>{{ $store.state.moduleA.userName }}</div>
  <div>{{ $store.state.moduleB.userName }}</div>

  <!-- 使用开启命名空间mutation -->
  <button @click="mutationFn">mutationFn</button>
  <!-- 使用开启命名空间action -->
  <button @click="actionFn">actionFn</button>
</template>

<script>
import { useStore } from 'vuex'
export default {
  name: 'App',
  setup () {
    const store = useStore()

    const mutationFn = () => {
      store.commit('moduleA/updateUserName')
    }

    const actionFn = () => {
      store.dispatch('moduleA/updateUserName')
    }
    return {
      mutationFn,
      actionFn
    }
  }
}
</script>