socket.io.clinet的回调中使用vuex dispatch或者commit方法修改state 但是视图不刷新

Question

写一个项目需要从后台接受推送数据然后显示出来
所以用socket.io.client通信
现在问题是通过在socket.io回调中使用store的dispatch或者commit方法来修改state 可以看到打印出来的state值已经修改 但是vue组件的视图层不刷新新的值 调用$store.getters.userCounts始终是0
请教一下这是为什么

main.js

import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'

import io from 'socket.io-client'
const domain = '127.0.0.1'
const port = '3000'

const socket = io('http://' + domain + ':' + port)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.use(socket, store)

/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>',
  created () {
    this.startClinet()
  },
  methods: {
    startClinet () {      
      // 连接后登录
      socket.on('connect', () => {
        this.$store.dispatch('updateDatasAction', 6666)
        // socket.emit('login', uid)
      })

      // 后端推送来消息时
      socket.on('refresh', function (response) {
        // store.dispatch('updateDatasAction', response)
      })
    }
  }
}).$mount('#app')

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todayUsers: 0
  },
  getters: {
    userCounts: state => {
      return state.todayUsers
    }
  },
  mutations: {
    UPDATA_DATAS (state, datas) {
      state.todayUsers = datas
    }
  },
  actions: {
    updateDatasAction (context, datas) {
      context.commit('UPDATA_DATAS', datas)
    }
  }
})