refactor: separate data and view layers 3

src/components/ArticlesListNavigation.vue

@@ -27,9 +27,8 @@ import { computed, defineComponent } from 'vue'
 import type { RouteParams } from 'vue-router'
 import type { AppRouteNames } from '../router'
 
-import { useArticlesMeta, ArticlesType } from '../composable/useArticlesMeta'
-
 import { isAuthorized } from '../store/user'
+import { tag, username, ArticlesType } from '../store/articlesMeta'
 
 interface ArticlesListNavLink {
   name: ArticlesType
@@ -49,8 +48,6 @@ export default defineComponent({
     useUserFavorited: { type: Boolean, default: false },
   },
   setup (props) {
-    const { tag, username } = useArticlesMeta()
-
     const allLinks = computed<ArticlesListNavLink[]>(() => [
       {
         name: 'global-feed',

src/composable/useArticles.ts

@@ -12,8 +12,10 @@ import {
 
 import { useArticlesMeta } from './useArticlesMeta'
 
+import { articlesType, tag, username, infoUpdated } from '../store/articlesMeta'
+
 export function useArticles () {
-  const { articlesType, tag, username, metaChanged } = useArticlesMeta()
+  useArticlesMeta()
 
   const articles = ref<Article[]>([])
   const articlesCount = ref(0)
@@ -58,7 +60,7 @@ export function useArticles () {
 
   const { active: articlesDownloading, run: runWrappedFetchArticles } = createAsyncProcess(fetchArticles)
 
-  watch(metaChanged, () => {
+  watch(infoUpdated, () => {
     if (page.value !== 1) changePage(1)
     else runWrappedFetchArticles()
   })

src/composable/useArticlesMeta.ts

@@ -1,10 +1,8 @@
-import { computed, ref, watch } from 'vue'
+import { watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { AppRouteNames } from '../router'
 
-export type ArticlesType = 'global-feed' | 'my-feed' | 'tag-feed' | 'user-feed' | 'user-favorites-feed'
-export const articlesTypes: ArticlesType[] = ['global-feed', 'my-feed', 'tag-feed', 'user-feed', 'user-favorites-feed']
-export const isArticlesType = (type: any): type is ArticlesType => articlesTypes.includes(type)
+import { updateArticlesMeta, ArticlesType, isArticlesType } from '../store/articlesMeta'
 
 const routeNameToArticlesType: Partial<Record<AppRouteNames, ArticlesType>> = ({
   'global-feed': 'global-feed',
@@ -17,17 +15,13 @@ const routeNameToArticlesType: Partial<Record<AppRouteNames, ArticlesType>> = ({
 export function useArticlesMeta () {
   const route = useRoute()
 
-  const tag = ref('')
-  const username = ref('')
-  const articlesType = ref<ArticlesType>('global-feed')
-
   watch(
     () => route.name,
     routeName => {
       const possibleArticlesType = routeNameToArticlesType[routeName as AppRouteNames]
       if (!isArticlesType(possibleArticlesType)) return
 
-      articlesType.value = possibleArticlesType
+      updateArticlesMeta('articlesType', possibleArticlesType)
     },
     { immediate: true },
   )
@@ -35,9 +29,8 @@ export function useArticlesMeta () {
   watch(
     () => route.params.username,
     usernameParam => {
-      if (usernameParam !== username.value) {
-        username.value = typeof usernameParam === 'string' ? usernameParam : ''
-      }
+      const value = typeof usernameParam === 'string' ? usernameParam : ''
+      updateArticlesMeta('username', value)
     },
     { immediate: true },
   )
@@ -45,17 +38,9 @@ export function useArticlesMeta () {
   watch(
     () => route.params.tag,
     tagParam => {
-      if (tagParam !== tag.value) {
-        tag.value = typeof tagParam === 'string' ? tagParam : ''
-      }
+      const value = typeof tagParam === 'string' ? tagParam : ''
+      updateArticlesMeta('tag', value)
     },
     { immediate: true },
   )
-
-  return {
-    tag: computed(() => tag.value),
-    username: computed(() => username.value),
-    articlesType: computed(() => articlesType.value),
-    metaChanged: computed(() => `${articlesType.value}-${username.value}-${tag.value}`),
-  }
 }

src/store/articlesMeta.ts

@@ -0,0 +1,28 @@
+import { computed, reactive } from 'vue'
+
+export type ArticlesType = 'global-feed' | 'my-feed' | 'tag-feed' | 'user-feed' | 'user-favorites-feed'
+export const articlesTypes: ArticlesType[] = ['global-feed', 'my-feed', 'tag-feed', 'user-feed', 'user-favorites-feed']
+export const isArticlesType = (type: any): type is ArticlesType => articlesTypes.includes(type)
+
+export interface ArticlesMeta {
+  tag: string,
+  username: string,
+  articlesType: ArticlesType,
+}
+
+const articlesMeta = reactive<ArticlesMeta>({
+  tag: '',
+  username: '',
+  articlesType: 'global-feed',
+})
+
+export const tag = computed(() => articlesMeta.tag)
+export const username = computed(() => articlesMeta.username)
+export const articlesType = computed(() => articlesMeta.articlesType)
+export const infoUpdated = computed(() => `${articlesType.value}-${username.value}-${tag.value}`)
+
+export function updateArticlesMeta (field: 'tag' | 'username', value: string): void;
+export function updateArticlesMeta (field: 'articlesType', value: ArticlesType): void;
+export function updateArticlesMeta (field: 'tag' | 'username' | 'articlesType', value: any): void {
+  articlesMeta[field] = value
+}