chore: migrate from vuex to pinia (#10366)

Author: benmccann

playground/ssr-vue/package.json

@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "example-external-component": "file:example-external-component",
+    "pinia": "^2.0.22",
     "vue": "^3.2.40",
-    "vue-router": "^4.1.5",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*",

playground/ssr-vue/src/main.js

@@ -1,3 +1,4 @@
+import { createPinia } from 'pinia'
 import { createSSRApp } from 'vue'
 import App from './App.vue'
 import { createRouter } from './router'
@@ -7,6 +8,8 @@ import { createRouter } from './router'
 // fresh store here.
 export function createApp() {
   const app = createSSRApp(App)
+  const pinia = createPinia()
+  app.use(pinia)
   const router = createRouter()
   app.use(router)
   return { app, router }

playground/ssr-vue/src/pages/Store.vue

@@ -3,16 +3,16 @@
 </template>
 
 <script>
-import { createStore } from 'vuex'
+import { defineStore } from 'pinia'
 
 export default {
   async setup() {
-    const store = createStore({
-      state: {
+    const useFooStore = defineStore('foo-store', {
+      state: () => ({
         foo: 'bar'
-      }
+      })
     })
-    return store.state
+    return useFooStore()
   }
 }
 </script>