Vue3+Vuex4+TS组合式API：Store仅显State，求方案示例

说法正确性判断 #

你听到的说法不完全正确。Vuex 4 结合 TypeScript 开发时，并非强制要求将 state、mutations、getters 和 actions 全部放在同一个文件中——模块拆分是完全支持的。但如果你的 Vue 开发者工具无法看到 getters、mutations 和 actions，大概率是模块注册过程中出现了问题（比如未正确导入并注册模块），或者类型定义不完整导致工具无法识别。

当然，将单个模块的所有逻辑放在同一文件中是一种常见的实现方式，尤其适合小型模块，能让代码结构更紧凑，下面是完整的实现示例：

完整实现示例 #

1. 定义单个模块文件（比如 src/store/modules/user.ts） #

// 定义State类型
interface UserState {
  userId: number | null;
  username: string | null;
  isLoggedIn: boolean;
}

// 初始化State
const state = (): UserState => ({
  userId: null,
  username: null,
  isLoggedIn: false,
});

// Getters
const getters = {
  getCurrentUser: (state: UserState) => ({
    id: state.userId,
    name: state.username,
    status: state.isLoggedIn ? '已登录' : '未登录',
  }),
  isAuthenticated: (state: UserState) => state.isLoggedIn,
};

// Mutations
const mutations = {
  SET_USER_INFO(state: UserState, payload: { userId: number; username: string }) {
    state.userId = payload.userId;
    state.username = payload.username;
    state.isLoggedIn = true;
  },
  LOGOUT(state: UserState) {
    state.userId = null;
    state.username = null;
    state.isLoggedIn = false;
  },
};

// Actions
const actions = {
  async login({ commit }, userInfo: { userId: number; username: string }) {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 1000));
    commit('SET_USER_INFO', userInfo);
  },
  async logout({ commit }) {
    // 模拟登出请求
    await new Promise(resolve => setTimeout(resolve, 500));
    commit('LOGOUT');
  },
};

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

2. 根Store文件（src/store/index.ts） #

import { createStore, Store } from 'vuex';
import userModule from './modules/user';

// 定义根State类型
interface RootState {
  user: ReturnType<typeof userModule.state>;
}

const store: Store<RootState> = createStore({
  modules: {
    user: userModule,
  },
});

export default store;
export type { RootState };

3. 在Vue应用中注册Store（src/main.ts） #

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

4. 在组件中使用（组合式API示例） #

<template>
  <div>
    <p v-if="isAuthenticated">欢迎您，{{ currentUser.name }}</p>
    <button v-if="!isAuthenticated" @click="handleLogin">登录</button>
    <button v-else @click="handleLogout">登出</button>
  </div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import type { RootState } from '@/store';

const store = useStore<RootState>();

// 获取Getters
const isAuthenticated = store.getters['user/isAuthenticated'];
const currentUser = store.getters['user/getCurrentUser'];

// 调用Actions
const handleLogin = () => {
  store.dispatch('user/login', { userId: 1001, username: 'JohnDoe' });
};

const handleLogout = () => {
  store.dispatch('user/logout');
};
</script>

解决开发者工具不显示问题的额外注意点 #

• 确保Vue开发者工具是最新版本，且已正确识别Vue 3项目
• 检查模块是否在根Store中正确注册，namespaced: true需正确设置
• 确保所有的getters、mutations、actions都有实际的逻辑（空对象可能被工具忽略）

内容的提问来源于stack exchange，提问作者Tatyana Molchanova