javascript - Hvordan får man adgang til nuxt `$config` i Vuex state? Den eneste adgangsmetode er gennem store actions metoder?

Jeg har brugt dotenv-biblioteket til at bruge .env-filen, men jeg er nødt til at ændre runtimeConfig, fordi jeg indså, at det var let at udsætte min projekts hemmelige nøgle.

I mit seneste projekt har jeg brugt nuxt "^2.14" og tilstanden er SPA. Så jeg bruger kun "publicRuntimeConfig" i nuxt.config.ts på den måde.

.env

Test_BASE_URL:'https://test.org'

nuxt.config.ts

export default {
   publicRuntimeConfig:{baseURL: proccess.env.Test_BASE_URL||''}
}

Jeg kan bruge env sådan i en vue-fil.

sample.vue

<script>
export default {
 mounted(){
  console.log(this.$config.baseURL)
 }
}
</script>

Men jeg kunne ikke bruge "$config" i butikkens tilstand. Jeg prøvede at skrive det, men det returnerede altid "undefined"

index.ts

export const state = (context) => ({
  url:context.$config
})

Jeg har henvist til denne fyrs løsninger og ændret statens værdi gennem actions-metoden. Jeg har brugt SPA, så jeg lavede en metode som 'nuxtServerInit' som plugins.

plugins/clientInit.ts

import {Context} from "@nuxt/types";

export default function (context:Context) {
 context.store.dispatch('initEnvURL',context.$config)
}

index.ts

interface State {
 testURL: string
}
const state = () => ({
 testURL:''
})
const mutations = {
 setTestURl(state:State,config:any) {
  state.testURL = config.baseURL
}
const actions = {
 initEnvURL({commit},$config) {
 commit('setTestURl',$config)
}
}
export default {state,mutations,actions}

Jeg lykkes med at ændre state-værdien gennem action-metoderne ovenfor, men jeg ved ikke, hvorfor "context" ikke kan bruge store/state-objekter direkte. Ved nogen, hvordan man bruger $config i store/state? Eller er det umuligt, og den eneste måde er at bruge $config gennem action-metoden som ovenfor?

Svar #1

Det er fordi, at i Vuex, kun handlinger faktisk modtager app-konteksten. State, mutations og getters kan ikke få adgang til den efter design.

Din oprindelige tilstand bør være kontekstløs, dvs. med værdier, der ikke afhænger af runtime-udførelsen.

Mutationer er tilstandsløse, de tager bare en parameter og opdaterer tilstanden. Det er alt. Kontekstuelle parametre bør komme fra kaldenden.

Getters er bare reaktive tilstandstransformationer, og bør ikke afhænge af kontekstegenskaber, det ville blande sig med Vuex-modultilstanden.

Så ja, det du skal gøre er at initialisere din butik inden for nuxtServerInit handlingerne (eller fra en plugin for SPA-apps):

nuxtServerInit({ store, config } ) {
   store.commit('UPDATE_BASE_URL', config.baseUrl)
}

Svar #2

Det vises IKKE gennem typesystemet, selv når man bruger @nuxt/types.

Få adgang til det sådan her i store/index.ts eller store/module.ts:

import { ActionTree, MutationTree } from 'vuex'

const actions: ActionTree<ModuleState, RootState> = {
   async yourActionName({ commit }, payload): Promise<void> {
      try {
         let url = this.app.$config.baseURL + "/path"; // <- config is accessed here.

         const res = await this.$axios.get<number>(url);

         commit("mutateState", res.data);

         return;
      } catch (error) {
         // Error handling
      }
   },
};

Min nuxt.config.js ser sådan ud:

export default {
...
   publicRuntimeConfig: {
     baseURL: process.env.BASE_URL || 'http://localhost:5000/api',
   }
...
};

Relaterede artikler