Fix deconstructed getters/state

Author: n-lark

frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js

@@ -1,3 +1,5 @@
+import { storeToRefs } from 'pinia'
+
 import store from '../../../../store/index.js'
 import { getTeamProperty } from '../../../TeamProperties.js'
 
@@ -7,7 +9,8 @@ export function useInstanceFormHelper () {
     const _store = store
 
     const teamRuntimeLimitReached = () => {
-        const { team } = useContextStore()
+        const { team: teamRef } = storeToRefs(useContextStore())
+        const team = teamRef.value
         let teamTypeRuntimeLimit = getTeamProperty(team, 'runtimes.limit')
         const currentRuntimeCount = (team?.deviceCount ?? 0) + (team?.instanceCount ?? 0)
         if (team?.billing?.trial && !team?.billing?.active && getTeamProperty(team, 'trial.runtimesLimit')) {
@@ -17,7 +20,8 @@ export function useInstanceFormHelper () {
     }
 
     const decorateInstanceTypes = (instanceTypes) => {
-        const { team } = useContextStore()
+        const { team: teamRef } = storeToRefs(useContextStore())
+        const team = teamRef.value
         // Do a first pass of the instance types to disable any not allowed for this team
         instanceTypes = instanceTypes.map(instanceType => {
             // Need to combine the projectType billing info with any overrides

frontend/src/pages/account/Settings.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { mapState } from 'pinia'
+import { mapState, storeToRefs } from 'pinia'
 import { mapState as mapVuexState } from 'vuex'
 
 import teamApi from '../../api/team.js'
@@ -65,6 +65,7 @@ import { RoleNames, Roles } from '../../utils/roles.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 import { useAccountTeamStore } from '@/stores/account-team.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'AccountSettings',
@@ -298,12 +299,13 @@ export default {
                         // refresh teams
                         return useAccountTeamStore().refreshTeams()
                     }).then(() => {
-                        const { team, teams } = useAccountTeamStore()
+                        const { teams } = storeToRefs(useAccountTeamStore())
+                        const team = useContextStore().team
                         // check if the active team is one deleted
                         if (team?.id === teamId) {
-                            if (teams.length > 0) {
+                            if (teams.value.length > 0) {
                                 // get another team
-                                useAccountTeamStore().setTeam(teams[0].slug)
+                                useAccountTeamStore().setTeam(teams.value[0].slug)
                             }
                         }
                     }).catch(err => {

frontend/src/store/modules/account/index.js

@@ -1,4 +1,4 @@
-import { getActivePinia } from 'pinia'
+import { getActivePinia, storeToRefs } from 'pinia'
 import { nextTick } from 'vue'
 
 import settingsApi from '../../../api/settings.js'
@@ -53,8 +53,11 @@ const getters = {
         return state.settings
     },
     requiresBilling (state, getters) {
-        const { user } = useAccountAuthStore()
-        const { team, isTrialAccount } = useContextStore()
+        const { user: userRef } = storeToRefs(useAccountAuthStore())
+        const { team: teamRef, isTrialAccount: isTrialAccountRef } = storeToRefs(useContextStore())
+        const user = userRef.value
+        const team = teamRef.value
+        const isTrialAccount = isTrialAccountRef.value
         const isNotAdmin = (user && !user.admin)
 
         return isNotAdmin &&
@@ -76,7 +79,9 @@ const getters = {
             getters.settings['team:create']
     },
     featuresCheck: (state) => {
-        const { teamMembership, team } = useContextStore()
+        const { teamMembership: teamMembershipRef, team: teamRef } = storeToRefs(useContextStore())
+        const teamMembership = teamMembershipRef.value
+        const team = teamRef.value
 
         const preCheck = {
             // Instances

frontend/src/stores/_account_bridge.js

@@ -1,6 +1,8 @@
 // Temporary bridge — reads account data from Vuex/Pinia during migration.
 // Delete this file after the account stores are migrated to Pinia.
 
+import { storeToRefs } from 'pinia'
+
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 
 export function useAccountBridge () {
@@ -10,19 +12,19 @@ export function useAccountBridge () {
     // context.js imports _account_bridge.js statically; requiring context.js lazily here avoids a cycle.
     const store = require('../store/index.js').default
     const { useContextStore } = require('@/stores/context.js')
-    const { user } = useAccountAuthStore()
-    const { team, teamMembership, isTrialAccount, isTrialAccountExpired } = useContextStore()
+    const { user } = storeToRefs(useAccountAuthStore())
+    const { team, teamMembership, isTrialAccount, isTrialAccountExpired } = storeToRefs(useContextStore())
     return {
-        user,
-        userId: user?.id || null,
-        team,
-        teamId: team?.id || null,
-        teamSlug: team?.slug || null,
+        user: user.value,
+        userId: user.value?.id || null,
+        team: team.value,
+        teamId: team.value?.id || null,
+        teamSlug: team.value?.slug || null,
         features: store.state.account.features,
-        teamMembership: teamMembership ?? { role: 0 },
+        teamMembership: teamMembership.value ?? { role: 0 },
         featuresCheck: store.getters['account/featuresCheck'],
         requiresBilling: store.getters['account/requiresBilling'],
-        isTrialAccount,
-        isTrialAccountExpired
+        isTrialAccount: isTrialAccount.value,
+        isTrialAccountExpired: isTrialAccountExpired.value
     }
 }

frontend/src/stores/account-team.js

@@ -23,8 +23,7 @@ export const useAccountTeamStore = defineStore('account-team', {
         },
         defaultBlueprint () { return this.blueprints?.find(blueprint => blueprint.default) },
         defaultUserTeam: (state) => {
-            const { user } = useAccountAuthStore()
-            const defaultTeamId = user?.defaultTeam || state.teams[0]?.id
+            const defaultTeamId = useAccountAuthStore().user?.defaultTeam || state.teams[0]?.id
             return state.teams.find(team => team.id === defaultTeamId)
         },
         notificationsCount: state => state.notifications?.length || 0,