store for profile form

src/store/forms/user_profile/actions.js

+/*
+export function someAction (context) {
+}
+*/
+
+export function updateField ({ commit, dispatch }, { field, value }) {
+  commit('setFieldValue', { field, value });
+  return dispatch('validateForm');
+}
+
+export function validateForm ({ state, commit }) {
+  commit('setValid', false);
+}
+
+export function submitForm ({ state, commit }) {}
+
+export function loadForm ({ commit, state, dispatch }, profile) {
+  Object.keys(state.fields).forEach(fieldName => {
+    commit('setFieldValue', fieldName, profile[fieldName]);
+  });
+  return dispatch('validateForm');
+}

src/store/forms/user_profile/getters.js

+/*
+export function someGetter (state) {
+}
+*/
+export const fields = state => state.fields;
+
+export const values = state => state.values;
+
+export const errors = state => state.errors;
+
+export const valid = state => state.valid;

src/store/forms/user_profile/index.js

+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

src/store/forms/user_profile/mutations.js

+/*
+export function someMutation (state) {
+}
+*/
+import Vue from 'vue';
+
+export function setFieldValue (state, { field, value }) {
+  Vue.set(state.values, field, value);
+}
+
+export function setValid (state, isValid) {
+  state.valid = isValid;
+}
+
+export function clearErrors (state) {
+  state.errors = [];
+}
+
+export function addError (state, error) {
+  state.errors.push(error);
+}

src/store/forms/user_profile/state.js

+export default {
+  //
+  fields: [
+    {
+      label: 'Bio',
+      name: 'bio',
+      type: 'textarea',
+      required: true,
+      rules: [r => r.length > 0 || 'The bio is required']
+    },
+    {
+      label: 'Public Email',
+      name: 'public_email',
+      type: 'email',
+      required: false
+    },
+    {
+      label: 'Location',
+      name: 'location',
+      type: 'text',
+      required: false
+    },
+    {
+      label: 'Website',
+      name: 'website',
+      type: 'url',
+      required: false
+    },
+    {
+      label: 'Instagram',
+      name: 'instagram',
+      type: 'url',
+      required: false
+    },
+    {
+      label: 'Avatar',
+      type: 'image',
+      name: 'avatarURL',
+      required: false
+    }
+  ],
+
+  values: {
+    bio: '',
+    public_email: '',
+    website: '',
+    instagram: '',
+    avatarURL: '',
+    location: ''
+  },
+
+  valid: false,
+  errors: []
+};

src/store/index.js

@@ -13,6 +13,8 @@ import profile from './profile';
 import ui from './ui';
 import project_detail from './project_detail';
 
+import forms_user_profile from './forms/user_profile';
+
 Vue.use(Vuex);
 
 /*
@@ -30,7 +32,8 @@ export default function (/* { ssrContext } */) {
       collections,
       profile,
       ui,
-      project_detail
+      project_detail,
+      forms_user_profile
     },
     mutations: {
       ...vuexfireMutations

src/store/project_detail/index.js

-import state from './state'
-import * as getters from './getters'
-import * as mutations from './mutations'
-import * as actions from './actions'
+import state from './state';
+import * as getters from './getters';
+import * as mutations from './mutations';
+import * as actions from './actions';
 
 export default {
   namespaced: true,
@@ -9,4 +9,4 @@ export default {
   getters,
   mutations,
   actions
-}
+};