Vuex中getter在modules中的问题?

这里为啥要单独来说getter和modules呢??? 首先我们介绍一下:

1.Getter介绍

①从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法
②会返回一个新数据,不会影响到state里面的老数据
③store中的数据发生变化.getter的数据也会跟着变化

---

先看一下代码:

首先我们先写一些伪代码来创造出问题来:

./stor/index.js

import Vue from 'vue'

// 导入vuex包
import Vuex from 'vuex';
// 安装插件
Vue.use(Vuex);

// 导入counter模块
import counter from './counter'
// 创建store对象
const store = new Vuex.Store({
  modules: {
    counter
  },
});

export default store

./store/counter.js

//定义模块

export default {
  // 空间命名
  namespaced: true,
  state: () => ({
    count: 0,
    list: [
      { id: 1, name: '吃饭', isDone: false },
      { id: 2, name: '睡觉', isDone: false },
      { id: 3, name: '看书', isDone: false },
    ]
  }),
  // 修改state里面的数据
  mutations: {
    add(state, payload) {
      state.count += payload.num
    }
  },
  // 获取异步操作数据然后传递给mutations修改state
  actions: {
    addAsync(conext, payload) {
      setTimeout(() => {
        conext.commit('add', payload)
      }, 1000)
    }
  },
  getters: {
    // getters就是计算属性 ,
    // 重点: 所有 getters 的函数, 第一个参数一定是 state
    isAlldone: function (state) {
      return state.list.every((ele) => ele.isDone)
    }
  },
}

再看一下我遇到的问题!!!

当然我们也可以使用getters的辅助函数,但是如果写辅助函数的话就总感觉自己少知道了点知识, 我还是把辅助函数解决方法写出来吧:

<template>
  <div class="right-container">
    <p>使用 getters 辅助函数查看数据list状态:{{ isAlldone }}</p>  //3.调用辅助函数里面方法 
  </div>
</template>
<script>
// 1.导入辅助函数mapGetters
import { mapGetters } from "vuex";
export default {
  computed: {
  //2.使用辅助函数
    // 使用modules 第一个参数是模块注册名称
    // 第二个参数为要映射数据的名称
    ...mapGetters("counter", ["isAlldone"]),
  },
};
</script>

2.来看看我是怎么找到问题并解决他的

1.首先我先到找到vue的调试工具 可以很清楚的看到注册counter组件里面的state里面一个是对象,而getters什么都不是.

2.当我们点开我就纳闷了,明明都是有属性的,为啥 $store.state.counter.count 可以访问到数据 $store.getters.counter.isAlldone却不能访问到.

3.于是我就直接想看看$store.getters里面有啥,直接写成这样,打印出来了{ "counter/isAlldone": false }

4.我突然傻眼了,思考了半天,原来getter和state并不是一样,getters是在计算属性,又因为我们是在modules里面,我们要使用他就要就要告诉它我们的组件加调用的方法,于是我想到了解决的方法呵呵哈哈哈 !!!!直接这样写就行了