Try effector 23

apps/website/docs/web-api/media_query.live.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { trackMediaQuery } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
@@ -10,7 +10,7 @@ const mq = trackMediaQuery('(max-width: 320px)', {
   setup: appStarted,
 });
 
-const matchesSmall = useStore(mq.$matches);
+const matchesSmall = useUnit(mq.$matches);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/network_status.live.vue

@@ -1,15 +1,14 @@
 <script setup>
 import { trackNetworkStatus } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
 const { $online, $offline } = trackNetworkStatus({ setup: appStarted });
 
-const online = useStore($online);
-const offline = useStore($offline);
+const [online, offline] = useUnit([$online, $offline]);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/page_visibility.live.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { trackPageVisibility } from '@withease/web-api';
 import { createEvent, createStore } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
@@ -12,7 +12,7 @@ const $history = createStore([])
   .on(visible, (state) => [...state, { at: new Date(), action: 'visible' }])
   .on(hidden, (state) => [...state, { at: new Date(), action: 'hidden' }]);
 
-const history = useStore($history);
+const history = useUnit($history);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/preferred_languages.live.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { trackPreferredLanguages } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
 const { $languages } = trackPreferredLanguages({ setup: appStarted });
 
-const languages = useStore($languages);
+const languages = useUnit($languages);
 
 onMounted(appStarted);
 </script>

apps/website/docs/web-api/screen_orientation.live.vue

@@ -1,15 +1,14 @@
 <script setup>
 import { trackScreenOrientation } from '@withease/web-api';
 import { createEvent } from 'effector';
-import { useStore } from 'effector-vue/composition';
+import { useUnit } from 'effector-vue/composition';
 import { onMounted } from 'vue';
 
 const appStarted = createEvent();
 
 const { $type, $angle } = trackScreenOrientation({ setup: appStarted });
 
-const type = useStore($type);
-const angle = useStore($angle);
+const [type, angle] = useUnit([$type, $angle]);
 
 onMounted(appStarted);
 </script>

package.json

@@ -37,8 +37,8 @@
     "@typescript-eslint/parser": "5.62.0",
     "@vitest/ui": "0.34.4",
     "bytes-iec": "^3.1.1",
-    "effector": "^22.8.6",
-    "effector-vue": "^22.2.0",
+    "effector": "23.0.0-rc.6",
+    "effector-vue": "23.0.0-rc.6",
     "eslint": "8.46.0",
     "glob": "^8.0.3",
     "i18next": "23.0.0",