chore: example about vuex

Author: posva

playground/package.json

@@ -14,7 +14,8 @@
     "pinia": "^2.0.23",
     "vue": "^3.2.41",
     "vue-router": "^4.1.5",
-    "vuefire": "workspace:*"
+    "vuefire": "workspace:*",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@firebase/app-types": "^0.8.0",

playground/src/main.ts

@@ -4,16 +4,27 @@ import { firestorePlugin } from 'vuefire'
 import App from './App.vue'
 import { createFirebaseApp, VueFirePlugin } from './firebase'
 import { createWebHistory, createRouter } from 'vue-router/auto'
+import { createStore } from 'vuex'
 
 const router = createRouter({
   history: createWebHistory(),
 })
 
+const store = createStore({
+  // can't work with vuefire
+  // strict: import.meta.env.DEV,
+  state: () => ({
+    count: 0,
+    todos: [],
+  }),
+})
+
 const app = createApp(App)
 app
   .use(createPinia())
   .use(firestorePlugin)
   .use(VueFirePlugin(createFirebaseApp()))
+  .use(store)
   .use(router)
 
 app.mount('#app')

playground/src/pages/vuex-store.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { useFirestore } from '@/firebase'
+import { doc, setDoc } from 'firebase/firestore'
+import { toRef } from 'vue'
+import { useDocument } from 'vuefire'
+import { useStore } from 'vuex'
+
+const store = useStore()
+const db = useFirestore()
+const countRef = doc(db, 'playground', 'pinia-counter').withConverter<number>({
+  toFirestore(n) {
+    return { n }
+  },
+  fromFirestore(snapshot) {
+    return snapshot.data().n as number
+  },
+})
+
+const count = toRef(store.state, 'count')
+
+useDocument(countRef, {
+  target: count,
+})
+
+async function increment() {
+  await setDoc(countRef, count.value + 1)
+}
+</script>
+
+<template>
+  <div>
+    <p>count: {{ count }}</p>
+    <button @click="increment">increment</button>
+  </div>
+</template>

playground/typed-router.d.ts

@@ -72,6 +72,12 @@ declare module 'vue-router/auto/routes' {
       Record<never, never>,
       Record<never, never>
     >
+    '/vuex-store': RouteRecordInfo<
+      '/vuex-store',
+      '/vuex-store',
+      Record<never, never>,
+      Record<never, never>
+    >
   }
 }