如何在 Vuex 状态下访问 nuxt `$config`？只有访问方法是通过存储操作方法吗？

Question

我已经习惯了dotenv库来使用.env文件，但是我不得不更改runtimeConfig，因为我意识到很容易暴露我的项目密钥。

在我最近的项目中，我使用了nuxt "^2.14" 模式是SPA。所以我只在 nuxt.config.ts 中使用“publicRuntimeConfig”。

.env

Test_BASE_URL:'https://test.org'

nuxt.config.ts

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

我可以像在 vue 文件中那样使用 env。

sample.vue

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

但我无法在商店状态下使用“$config”。我试着写那个，但它总是 return “undefied”

index.ts

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

我已经提到了这些人并通过 actions 方法更改状态的值。我用过SPA，所以我把像'nuxtServerInit'这样的方法作为插件。

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}

我通过上面的动作方法成功改变了状态值，但我不知道为什么“上下文”不能直接使用 store/state 对象。有谁知道如何在 store/state 中使用 $config？还是不可能通过上述操作方法使用 $config 的唯一方法？

Answer 1

那是因为在 Vuex 中，实际上只有操作接收到应用程序上下文。 State、Mutations 和 Getters 无法按设计访问它。

您的初始状态应该是无上下文的，即具有不依赖于运行时执行的值。

突变是无状态的，它们只是接受一个参数并更新状态。就这样。上下文参数应该来自调用者。

Getter 只是反应式状态转换，不应依赖于上下文属性，否则会扰乱 Vuex 模块状态。

所以，是的，您必须在 nuxtServerInit 操作（或从 SPA 应用程序的插件）中初始化您的商店：

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

如何在 Vuex 状态下访问 nuxt `$config`？只有访问方法是通过存储操作方法吗？

How to access nuxt `$config` in Vuex state? Only access method is through store actions methods?

javascript

typescript

vue.js

vuex

nuxt.js