vue3vuex模块化用法

### Vue 3 中 Vuex 模块化使用方法

#### 创建模块化的 Vuex Store 实例

为了实现模块化，在 `store` 文件夹下创建多个独立的模块文件，每个模块负责管理特定状态逻辑。对于根级别的 store 配置，则只需引入这些模块并注册到 `modules` 属性内。

// store/index.js
import { createStore } from 'vuex'
import modHome from '@/store/mod-home'

export default createStore({
  modules: {
    home: modHome,
  }
})

此代码片段展示了如何通过 `createStore()` 函数来初始化一个新的 Vuex 存储实例，并将自定义模块挂载至其上[^4]。

#### 编写模块的具体内容

每一个模块都应包含自己的 `state`, `mutations`, `actions` 和 `getters`. 这里以首页模块为例：

// store/modules/home.js
const state = () => ({
  message: ''
})

const mutations = {
  setMessage(state, payload){
    state.message = payload;
  }
}

const actions = {
  async fetchMessage({ commit }, params) {
    try{
      let response = await someApiCall(params);
      commit('setMessage', response.data);
    }catch(error){
      console.error(error);
    }
  }
}

const getters = {
  getMessage: (state) => state.message
}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

上述代码实现了名为 `home` 的模块，其中包含了基本的状态管理和异步操作处理能力。注意设置 `namespaced:true` 可以为该模块提供命名空间支持，从而避免不同模块间名称冲突的问题[^5]。

#### 组件内部调用方式

当需要访问某个模块的数据或触发相应的行为时，可以在组件中这样操作:

<template>
<div>{{ formattedMessage }}</div>
<button @click="fetchData">Fetch Data</button>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed } from 'vue';

const store = useStore();

let fetchData = function(){
  store.dispatch('home/fetchMessage',{});
};

let formattedMessage = computed(()=>
  store.getters['home/getMessage']
);

</script>

这里利用了 Composition API 提供的新特性——setup语法糖以及组合式函数 `useStore()`, 来获取当前应用中的存储对象；并通过路径形式指定目标模块下的具体 action 或 getter 方法名来进行交互.