如何在Vuex状态下访问nuxt '$config'？只有通过存储操作方法才能访问？

nx7onnlm 于 2023-01-02 发布在 Vue.js

关注(0)|答案(2)|浏览(140)

我曾经使用dotenv库来使用. env文件，但我不得不更改runtimeConfig，因为我意识到这很容易暴露我的项目密钥。
在我最近的项目中，我使用了nuxt "^2.14"，模式是SPA。所以我只在nuxt.config.ts中使用了"publicRuntimeConfig"。
.环境

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"。我试着写它，但是它总是返回"undefied"
index.ts

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

我引用了这个家伙的solutions，并通过actions方法更改了state的值。我使用了SPA，所以我制作了像'nuxtServerInit'这样的方法作为插件。
插件/客户端初始化. 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}

我成功地通过上面的操作方法改变了状态值，但是我不知道为什么"context"不能直接使用store/state对象。有人知道如何在store/state中使用$config吗？或者是不可能通过上面的操作方法使用$config的唯一方法吗？

vue.js

来源：https://stackoverflow.com/questions/68218994/how-to-access-nuxt-config-in-vuex-state-only-access-method-is-through-store

2条答案

按热度按时间

3df52oht1#

这是因为在Vuex中，只有动作才能接收到应用上下文，而State、Mutations和Getter在设计上无法访问它。
初始状态应该是无上下文的，即其值不依赖于运行时执行。
变异是无状态的，它们只是接受一个参数并更新状态。仅此而已。上下文相关的参数应该来自调用者。
getter只是被动的状态转换，不应该依赖于上下文属性，否则会扰乱Vuex模块的状态。
所以，是的，你必须做的是在nuxtServerInit操作中初始化你的商店（或从SPA应用程序的插件）：

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

赞(0）回复(0）举报 2023-01-02

vq8itlhq2#

即使使用@nuxt/types，它也不会通过类型系统显示。
在store/index.ts或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
      }
   },
};

我的nuxt.config.js看起来像：

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

赞(0）回复(0）举报 2023-01-02

我来回答

如何在Vuex状态下访问nuxt '$config'？只有通过存储操作方法才能访问？

2条答案

相关问题

热门标签

最新问答