docs: testing actions devtools

diff --git a/docs/.vitepress/components/ThemeToggle.vue b/docs/.vitepress/components/ThemeToggle.vue
index 9f4cfc3a2417d5257a6796de6148aa921b2aec40..30a7a16a1b945d0323927d3da730cfb741f0278a 100644 (file)
--- a/docs/.vitepress/components/ThemeToggle.vue
+++ b/docs/.vitepress/components/ThemeToggle.vue
@@ -58,6 +58,18 @@
   <p>Counter :{{ counterStore.n }}</p>
 
   <button @click="counterStore.increment">Increment</button>
+  <button @click="counterStore.n++">Direct Increment</button>
+  <button
+    @click="
+      counterStore.$patch((state) => {
+        state.n++
+        state.incrementedTimes++
+      })
+    "
+  >
+    Direct patch
+  </button>
+  <button @click="counterStore.fail">Fail</button>
   <button @click="counterStore.decrementToZero(300, true)">To ZERO</button>
 </template>
 

diff --git a/docs/.vitepress/stores/counter.ts b/docs/.vitepress/stores/counter.ts
index 27ad109b4c1938ddd14e6ca0cc24c73b80cee621..c4827136344f73368fe878a000a347d189a32f79 100644 (file)
--- a/docs/.vitepress/stores/counter.ts
+++ b/docs/.vitepress/stores/counter.ts
@@ -9,6 +9,7 @@ export const useCounter = defineStore({
     n: 0,
     incrementedTimes: 0,
     decrementedTimes: 0,
+    numbers: [] as number[],
   }),
 
   getters: {
@@ -24,6 +25,18 @@ export const useCounter = defineStore({
       this.n += amount
     },
 
+    async fail() {
+      const n = this.n
+      await delay(1000)
+      this.numbers.push(n)
+      await delay(1000)
+      if (this.n !== n) {
+        throw new Error('Someone changed n!')
+      }
+
+      return n
+    },
+
     async decrementToZero(interval: number = 300, usePatch = true) {
       if (this.n <= 0) return