为什么 state 属性不显示在 VueX 项目中计算的值？

Question

在使用 VUEX 构建 VUE 项目时。 我没有从 todos.js VUEX 模块中定义的 state 获取属性，而是获取 VUEX 存储中定义的正常属性。 我使用了模块并分离了文件。

HTML

<div> isLoading: {{ isLoading }} </div>     // isLoading: 
<div> isValid: {{ isValid }} </div>         // isValid: true

计算

computed: {
isLoading() {
  const loading = this.$store.state.isLoading;
  console.log(loading);
  return loading;
},

isValid() {
  const valid = this.$store.state.isValid;
  console.log(valid);
  return valid;
},

},

维克斯商店

import Vue from 'vue';
import Vuex from 'vuex';
import todos from './modules/todos';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isValid: true,
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    todos,
  },
});

todos.js

const state = {
  isLoading: true,
};

export default {
  state,
};

OUTPUT

isLoading:
isValid: true

isLoading 不显示为真，但 isValid 显示为真。 我不明白这种行为，我已经阅读了文档并且找不到任何东西。

Answer 1

尝试添加模块名称

computed: {
  isLoading() {
    const loading = this.$store.state.todos.isLoading;
    console.log(loading);
    return loading;
  }
},

Answer 2

您可以使用 vuex 辅助功能，例如mapState

import { mapState } from "vuex";
...

computed: {
   ...mapState("/todos", ["isLoading"])
}

或者

computed: {
  ...mapState({
    isLoading: state => state.todos.isLoading
  })
}