Vuex 商店模块名称正在添加到状态

Question

我在 vue 商店中使用模块方法。当我将导入的文件添加到模块对象时，模块状态被包裹在模块名称中。

这是我的 auth.js 文件

import axios from 'axios';
import router from "../../routes/routes"
export default{
    state: {
    user: null
    },
mutations : {
  SetUser(state, user){
      state.user = user;
   },
  removeUser(state){
      state.user = null
   }
},
actions: {
  async Login({commit}, payload){
  
     },
   async logout({commit}){
    }
  },
getters: {
   isLoggedIn(state) {
        return state.user !== null;
    },
 }
}

这是我的 store.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 Vue.use(Vuex);
 import auth from "./modules/auth"
 export default new Vuex.Store({
      modules: {
          auth
       }
   });

state 应该是 user:{} 但它显示如下。

Answer 1

<块引用>

我在 vue 商店中使用模块方法。当我将导入的文件添加到模块对象时，模块状态被包裹在模块名称中。

这是您使用模块时代码的预期行为。状态将被包裹在顶部状态内的模块字段中。

在模块中定义的 Getter（如您的示例中的 isLoggedIn）将该模块的状态作为第一个参数（以及根状态作为第三个参数）。这就是为什么 state.user 实际上在该 getter 中工作的原因，即使在您的商店中，真正的用户路径是 state.auth.user。

如果您希望 user 直接成为 state 的一部分，您应该将其定义为商店状态的一部分，而不是 auth 模块。

另一方面，虽然每个模块的状态都放在该模块内，但 getter 不是。所以你可以调用 this.$store.getters.isLoggedIn 并且它会起作用。