Revert "refactor: separate data and view layers 3"

This reverts commit 547852927b.

src/components/ArticlesListNavigation.vue

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

src/composable/useArticlesMeta.ts

@@ -1,8 +1,10 @@
-import { watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { AppRouteNames } from '../router'
 
-import { updateArticlesMeta, ArticlesType, isArticlesType } from '../store/articlesMeta'
+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)
 
 const routeNameToArticlesType: Partial<Record<AppRouteNames, ArticlesType>> = ({
   'global-feed': 'global-feed',
@@ -15,13 +17,17 @@ 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
 
-      updateArticlesMeta('articlesType', possibleArticlesType)
+      articlesType.value = possibleArticlesType
     },
     { immediate: true },
   )
@@ -29,8 +35,9 @@ export function useArticlesMeta () {
   watch(
     () => route.params.username,
     usernameParam => {
-      const value = typeof usernameParam === 'string' ? usernameParam : ''
-      updateArticlesMeta('username', value)
+      if (usernameParam !== username.value) {
+        username.value = typeof usernameParam === 'string' ? usernameParam : ''
+      }
     },
     { immediate: true },
   )
@@ -38,9 +45,17 @@ export function useArticlesMeta () {
   watch(
     () => route.params.tag,
     tagParam => {
-      const value = typeof tagParam === 'string' ? tagParam : ''
-      updateArticlesMeta('tag', value)
+      if (tagParam !== tag.value) {
+        tag.value = typeof tagParam === 'string' ? tagParam : ''
+      }
     },
     { 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

@@ -1,28 +0,0 @@
-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
-}