vuex.esm.js?2f62:1023 [vuex] unknown getter: doneTodos

Question

代码如下所示怎么修改?
login.vue

<template>
  <div>
    <el-button type="primary" plain>主要按钮</el-button>
    <div>{{ doneTodos }}</div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { mapGetters, mapActions } from "vuex";
export default Vue.extend({
  created() {
    console.log("111111", this.$store.state.mainStore.test);
  },
  computed: {
    ccc() {
      return "nnnn";
    },
    ...mapGetters(["doneTodos"]),
  },
});
</script>
<style lang="scss" scoped>
</style>

main.ts中内容

const mainStore = {
    namespaced: true,
    state: {
        test: "aaa",
    },
    getters: {
        doneTodos: (state: any) => {
            return state.test.length;
        }
    }
}
export default mainStore;

import Vue from "vue";
import Vuex from "vuex";
import mainStore from './modules/main';

Vue.use(Vuex);



export default new Vuex.Store({
  // state: {},
  // mutations: {},
  // actions: {},
  modules: {
    mainStore,
  }
});

Answer 1

Vuex 中的 state 和 Vue 中的 data 遵循相同规则，data 必须声明为返回一个初始数据对象的函数。

因为使用了 modules， 所以 store 中的 state 写法有问题，导致 getter 中没有导出 test，改成以下试试：

const mainStore = {
    namespaced: true,
    state: () => ({
        test: "aaa",
    })
    ...
}