博客

vue3中访问vuex中的数据时，

必须通过

computed

计算属性

，才能在模板中

响应式显示

，否则vuex中数据发生变化后，模板页面中没有变化。

但在setup方法中，没有

this

、

computed

等vue2中常用的方法，需要从vue中引入。

解决方法如下：

import { computed} from "vue";
import { useStore } from "vuex";
export default {
  name: 'APP',
  setup() {
  	let store = useStore();
  	let userdata = computed(() => store.state.userdata);
  	return {
  	  userdata
  	}
  }
}

在模板中使用时直接引用即可。

若需要批量从vuex中获取数据并生成计算属性供模板调用，则可借助于

mapState

方法实现，可参考博客《

vue3.0下如何使用mapState，mapGetters和mapActions

》，经测试可顺利运行。