Vue3 setup中使用vuex中的数据

vue3中访问vuex中的数据时,必须通过computed计算属性,才能在模板中响应式显示,否则vuex中数据发生变化后,模板页面中没有变化。
但在setup方法中,没有thiscomputed等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》,经测试可顺利运行。

你可能感兴趣的:(前端开发,前端,javascript,vue3)