vuex state数据更新了 mapState mapGetters未生效

点击login后, vuex数据发生变化, 页面上没变化

<template>  
    <view class="content">  
        <button type="primary" @click="login22">登录</button>  
        <text class="title">{{getUserInfo?getUserInfo.name:""}}---{{getUserInfo?getUserInfo.avatar:""}}</text>  
        <text class="title">{{user2?user2.name:""}}---{{user2?user2.avatar:""}}</text>  
    </view>  
</template>  

<script>  
import { mapGetters, mapState } from 'vuex';  
export default {  
    data() {  
        return {  
            user: {  
                name: '',  
                avatar: ''  
            }  
        };  
    },  
    computed: {  
        ...mapGetters(['getUserInfo']),  
        ...mapState({ user2: state => state.user })  
    },  
    methods: {  
        login22() {  
            this.user.name = 'admin';  
            this.user.avatar = 'url';  
            this.$store.dispatch('login', this.user);  
        }  
    }  
};  
</script>  

<style>  
</style>  

vuex:
index.js

import Vue from 'vue'  
import Vuex from 'vuex'  
import actions from './actions'  
import mutations from './mutations'  

Vue.use(Vuex)  

export default new Vuex.Store({  
    actions,  
    modules: {  
        mutations  
    }  
})  

actions.js

const actions = {  
    login({commit}, userInfo) {  
        commit("login", userInfo)  
    }  
}  

export default actions  

mutations.js

import getters from './gettes.js'  
const state = {  
    user: {  
        name: 'aa',  
        avatar: 'cc'  
    }  
}  

const mutations = {  
    login(state, userInfo) {  
        this.state.user = userInfo  
        console.log(this.state)  
    }  
}  

export default {  
    state,  
    mutations,  
    getters  
}

getters.js

export default {  
    getUserInfo(state) {  
        return state.user  
    }  
}