vuex getters和mapGetters不更新的问题

在compents里面commit了state也更新了，但是getters和mapGetters却没有更新,显示undefined
vuex代码:

import {setCode, getCode} from '@/utils/api'
import Vue from 'vue'
const user = {
  states: {
    code: getCode(),
    currentArea: {}
  },
  mutations: {
    SET_CODE: (state,code) => {
      state.code = code
      setCode(code)
    },
    SET_CURRENT_AREA: (state, area) => {
      state.currentArea = area
    },
    ...
  },
  actions: {
	...
  }
}
export default user

组件里的代码:

<template>
	...
</template>
<script>
import {mapGetters} from 'vuex'
export default{
	...
	methods: {
		changeArea(area){
			this.$store.commit('SET_CURRENT_AREA',area)
		}
	},
	computed: {
		 ...mapGetters([
		     'currentArea'
	    ]),
}
</script>

奇怪的是,commit之后使用vue-Devtools里发现state里的值已经发生了更新，但是getters和mapGetters里却没有更新，值为undefined。
后面发现原来是设置值的时候有问题,在mutations里面的触发方法里面不能直接使用state赋值的方式而应该使用Vue.set的方式,于是把代码改成如下方式就可以了:

import {setCode, getCode} from '@/utils/api'
import Vue from 'vue'
const user = {
	...
  mutations: {
    ...
    SET_CURRENT_AREA: (state, area) => {
      Vue.set(state,'currentArea',area)
    }
  }
}
export default user