vuex中state改变但是没有进行渲染

Question

这是store.js中的Mutations

const mutations = {
  //用户是否登陆跳转的flag的事件
  setChangeHome: function (state) {
    state.islogin.flag = true;
  }
};

const getters = {
  islogin: function () {
    return state.islogin.flag
  }
};

const state = {
  islogin: {
    flag: false
  },
  shopper: {
    name:'',
    id:''
  }
};

const mutations = {
  //用户是否登陆跳转的flag的事件
  setChangeHome: function (state) {
    state.islogin.flag = true;
  },
  setUserInfo: function (state, logInfo) {
    state.shopper.shopperId = logInfo.id;
    state.shopper.shopperCode = logInfo.pwd;
    state.shopper.shopperName = "模拟商户";
    console.log('登陆成功', logInfo);
  }
}；

const actions = {
  subMitUserLogin: function ({
    commit
  }, logInfo) {
    return new Promise((resolve, reject) => {
      //console.log(logInfo);
      //先做一个死判断，搭起Vuex的框架
      //这里以后是一个异步的Promise回调。
      //异步用axios做
      if () {
        //登陆成功
        //存入state
        commit('setUserInfo', logInfo);
        resolve();
      } else {
        reject();
      }
    });
  }
};

login.vue：

 data() {
    return {
      logInfo: this.$store.state.shopper
    };
  },

我在login.vue中使用 store.dispatch 来验证用户登陆。
在登陆成功以后我使用 store.commit('setChangeHome') 来改变state中 islogin 的 flag 状态。

我的问题是

1. 在 login.vue 中，我验证了用户的登陆，然后改变了state 的 shopper 对象，在此组件中是可以进行自动渲染的（请注意我的对象赋值方式）logInfo: this.$store.state.shopper，同时也改变了 islogin 的状态。但是在 enyrt.vue中，为什么不能渲染呢？组件并没有因为state改变而被渲染。

   <login v-if="!islog"></login>
   
   data:function(){
      return {
        islog:this.$store.state.islogin.flag
      }

2. maGetters到底是什么。为什么这样写就可以渲染了。computed:mapGetters(['islogin'])
3. 两种写法或者说两种思路或者说两种实现方式为什么一个可以一个不可以？

Answer 1

只要shopper的引用不变，它就不会渲染，而mapGetter我猜它应该是进行了深度监听，除了引用，也监听属性值，这个要去看mapgetter源码