Computed Reactivity

by xu xiaofei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script type="text/x-template" id="comp">
  <div>{{ upperCaseName }}</div>
</script>


<div id="app"/>

JavaScript

const store = new Vuex.Store({
	state: {
  	users: {
    	1: { name: 'Aoife', active: true },
      2: { name: 'Brian', active: true },
      3: { name: 'Caoimhe', active: true },
    },
    currentUserId: 2,
  },
  getters: {
  	activeUsers: (state) => state.users.filter(({ active}) => active),
  	currentUser: (state) => state.users[state.currentUserId],
  },
});

const comp = {
	name: 'childComp',
	props: ['user'],
	template: '#comp',
  computed: {
  	upperCaseName: (vm) => vm.user.name.toUpperCase(),
  }
}

new Vue({
	store,
	el: '#app',
  components: { Comp: comp },
  template: '<div><Comp v-if="validCurrentUser" :user="currentUser"/><span v-else>{{ total }}</span></div>',
  computed: {
  	...Vuex.mapGetters(['currentUser', 'activeUsers']),
    validCurrentUser: (vm) => vm.currentUser.name.length,
    total: (vm) => vm.activeUsers.length,
  },
  async mounted() {
  	await this.$nextTick();
  	debugger;
  }
})