fix: access $store from nuxt2Context (#930)

Author: wattanx

Diff for: packages/bridge/src/runtime/app.plugin.mjs

@@ -99,6 +99,9 @@ export default async (ctx, inject) => {
 
   const proxiedApp = new Proxy(nuxtApp, {
     get (target, prop) {
+      if (prop === '$store') {
+        return target.nuxt2Context.store
+      }
       if (prop[0] === '$') {
         return target.nuxt2Context[prop] || target.vue2App?.[prop]
       }

Diff for: playground/nuxt.config.ts

@@ -29,7 +29,7 @@ export default defineNuxtConfig({
       })
     }
   ],
-  plugins: ['~/plugins/setup.js'],
+  plugins: ['~/plugins/setup.js', '~/plugins/store.js'],
   nitro: {
     routeRules: {
       '/route-rules/spa': { ssr: false }

Diff for: playground/pages/store.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const { $store } = useNuxtApp()
+
+const test = computed(() => $store.state.test)
+</script>
+
+<template>
+  <div>
+    <p>state is: {{ test }}</p>
+  </div>
+</template>

Diff for: playground/plugins/store.js

@@ -0,0 +1,5 @@
+export default defineNuxtPlugin(() => {
+  const { $store } = useNuxtApp()
+
+  $store.commit('setTest', '✅')
+})

Diff for: playground/store/index.js

@@ -7,3 +7,9 @@ export const actions = {
     state.test = '✅'
   }
 }
+
+export const mutations = {
+  setTest (state, value) {
+    state.test = value
+  }
+}

Diff for: test/bridge.test.ts

@@ -121,6 +121,11 @@ describe('legacy capi', () => {
     expect(html).toMatch(/([\s\S]*✅){11}/)
     await expectNoClientErrors('/legacy-capi')
   })
+
+  it('should be changed store.state', async () => {
+    const html = await $fetch('/legacy-capi')
+    expect(html).toContain('<tr><td><b>useStore</b></td><td> ✅</td></tr>')
+  })
 })
 
 describe('errors', () => {
@@ -191,6 +196,13 @@ describe('middleware', () => {
   })
 })
 
+describe('store', () => {
+  it('should be able to access $store in plugins', async () => {
+    const html = await $fetch('/store')
+    expect(html).toContain('state is: ✅')
+  })
+})
+
 describe('nitro plugins', () => {
   it('should prepend a node to the rendered template', async () => {
     const html = await $fetch('/nitro/template-plugin')