Move state from root instance to Vuex

It is going to be easier to manage updating state if it is stored in
Vuex

app/assets/javascripts/groups/members/components/app.vue

 <script>
 export default {
   name: 'GroupMembersApp',
-  props: {
-    groupId: {
-      type: Number,
-      required: true,
-    },
-    currentUserId: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-    members: {
-      type: Array,
-      required: true,
-    },
-  },
 };
 </script>
 

app/assets/javascripts/groups/members/index.js

 import Vue from 'vue';
+import Vuex from 'vuex';
 import App from './components/app.vue';
+import { createStore } from '~/vuex_shared/modules/members';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default el => {
@@ -7,26 +9,20 @@ export default el => {
     return () => {};
   }
 
+  Vue.use(Vuex);
+
+  const { members, groupId, currentUserId } = el.dataset;
+
+  const store = createStore({
+    members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
+    sourceId: parseInt(groupId, 10),
+    currentUserId: currentUserId ? parseInt(currentUserId, 10) : null,
+  });
+
   return new Vue({
     el,
     components: { App },
-    data() {
-      const { members, groupId, currentUserId } = this.$options.el.dataset;
-
-      return {
-        members: convertObjectPropsToCamelCase(JSON.parse(members), { deep: true }),
-        groupId: parseInt(groupId, 10),
-        ...(currentUserId ? { currentUserId: parseInt(currentUserId, 10) } : {}),
-      };
-    },
-    render(createElement) {
-      return createElement('app', {
-        props: {
-          members: this.members,
-          groupId: this.groupId,
-          currentUserId: this.currentUserId,
-        },
-      });
-    },
+    store,
+    render: createElement => createElement('app'),
   });
 };

app/assets/javascripts/vuex_shared/modules/members/index.js

+import Vuex from 'vuex';
+import createState from './state';
+
+export const createStore = initialState =>
+  new Vuex.Store({
+    state: createState(initialState),
+  });

app/assets/javascripts/vuex_shared/modules/members/state.js

+export default ({ members, sourceId, currentUserId }) => ({
+  members,
+  sourceId,
+  currentUserId,
+});

spec/frontend/groups/members/index_spec.js

@@ -5,15 +5,14 @@ import { membersJsonString, membersParsed } from './mock_data';
 
 describe('initGroupMembersApp', () => {
   let el;
+  let vm;
   let wrapper;
 
   const setup = () => {
-    const vm = initGroupMembersApp(el);
+    vm = initGroupMembersApp(el);
     wrapper = createWrapper(vm);
   };
 
-  const getGroupMembersApp = () => wrapper.find(GroupMembersApp);
-
   beforeEach(() => {
     el = document.createElement('div');
     el.setAttribute('data-members', membersJsonString);
@@ -31,28 +30,36 @@ describe('initGroupMembersApp', () => {
     wrapper = null;
   });
 
-  it('parses and passes `currentUserId` prop to `GroupMembersApp`', () => {
+  it('renders `GroupMembersApp`', () => {
     setup();
 
-    expect(getGroupMembersApp().props('currentUserId')).toBe(123);
+    expect(wrapper.find(GroupMembersApp).exists()).toBe(true);
   });
 
-  it('does not pass `currentUserId` prop if not provided by the data attribute (user is not logged in)', () => {
-    el.removeAttribute('data-current-user-id');
+  it('parses and sets `currentUserId` in Vuex store', () => {
     setup();
 
-    expect(getGroupMembersApp().props('currentUserId')).toBeNull();
+    expect(vm.$store.state.currentUserId).toBe(123);
+  });
+
+  describe('when `data-current-user-id` is not set (user is not logged in)', () => {
+    it('sets `currentUserId` as `null` in Vuex store', () => {
+      el.removeAttribute('data-current-user-id');
+      setup();
+
+      expect(vm.$store.state.currentUserId).toBeNull();
+    });
   });
 
-  it('parses and passes `groupId` prop to `GroupMembersApp`', () => {
+  it('parses and sets `data-group-id` as `sourceId` in Vuex store', () => {
     setup();
 
-    expect(getGroupMembersApp().props('groupId')).toBe(234);
+    expect(vm.$store.state.sourceId).toBe(234);
   });
 
-  it('parses and passes `members` prop to `GroupMembersApp`', () => {
+  it('parses and sets `members` in Vuex store', () => {
     setup();
 
-    expect(getGroupMembersApp().props('members')).toEqual(membersParsed);
+    expect(vm.$store.state.members).toEqual(membersParsed);
   });
 });