Separating the dependency of UI and functional data in Vue

In this post I’ll show a way to separate the dependency of UI and functional data in Vue.

Let’s say we have a dashboard that displays a user profile button.

// store.ts
const store = createStore({
  state: {
    email: ''
  }
})

<script setup lang="ts">
import { store } from '@/store'
 
const store = useStore()
 
const updateEmail = async (email: string) => {
  await fetch.put('/api/user/email', {
    method: 'PUT',
    body: {
      email: store.state.email
    }
  })
}
</script>
 
<template>
  <button @click="updateEmail">{{ store.state.email }}</button>
</template>

//action.ts
export function updateEmail(email: string) {
  store.state.email = email
}

// store.js
import { reactive } from 'vue'
 
export const uiStore = reactive({
  emailInputValue: ''
})
 
export const dataStore = reactive({
  email: ''
})
 
export function updateEmail() {
  dataStore.email = uiStore.emailInputValue
  // POST email to server
}