首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在nuxt的store/action中访问i18n实例?

在nuxt的store/action中访问i18n实例,可以通过以下步骤实现:

  1. 首先,在nuxt项目的根目录下的plugins文件夹中创建一个新的插件文件,例如i18n.js
  2. i18n.js文件中,引入vue-i18n库并创建一个新的VueI18n实例。可以使用npmyarn安装vue-i18n库。
代码语言:txt
复制
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en', // 设置默认语言
  messages: {
    en: {
      // 定义英文语言包
      // ...
    },
    zh: {
      // 定义中文语言包
      // ...
    }
  }
})

export default i18n
  1. nuxt.config.js文件中,将刚刚创建的插件文件添加到plugins配置中。
代码语言:txt
复制
module.exports = {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/i18n.js', ssr: true }
  ],
  // ...
}
  1. 在store的action中,通过this.app.i18n访问i18n实例。
代码语言:txt
复制
export const actions = {
  someAction({ commit }) {
    const i18n = this.app.i18n
    // 使用i18n实例进行国际化处理
    // ...
  }
}

通过以上步骤,你可以在nuxt的store/action中访问i18n实例,并使用其提供的方法进行国际化处理。

关于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或咨询腾讯云客服获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

rancher教程(三): rancher 前端项目dashboard架构解析

nuxt是2.14.6版本。该版本对应vue是2.x。...项目中,还存储了一些文档,使用storybook这个库来进行管理 操作命令都在package.json。...web vnc简单来说就是在浏览器里访问某一条主机桌面,并实质操作。你或许在一些云厂商平台使用过该功能,非常酷炫。其实原理是将桌面服务当做一个对外暴露web 服务。...解压库jszip,国际化i18n,状态管理vuex 项目目录 page根据nuxt架构规定,该目录存放所有文件都是一个单独页面,这意味着你看到页面,入口文件都在该目录下,并且你可以根据路径,找到文件...edit,detail与list 是抽离出来编辑页面,详情页,列表页组件。属于基础组件,适用性很强。 store 存放是vuex定义状态。

1.2K20

简述struts2拦截器作用_springmvc登录拦截器

Struts2拦截器栈就是将拦截器按一定顺序联结成一条链。在访问被拦截方法或字段时,Struts2拦截器链拦截器就会按其之前定义顺序被调用。...二、实现Struts2拦截器原理 Struts2拦截器实现原理相对简单,当请求struts2action时,Struts 2会查找配置文件,并根据其配置实例化相对 拦截器对象,然后串成一个列表...属性可以被后一个Action访问,现在和chain类型result()结合使用。...i18n 记录用户选择locale Logger Interceptor logger 输出Action名字 Message Store Interceptor store 存储或者访问实现ValidationAware...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

31920

Nuxt.js实战:Vue.js服务器端渲染框架

store/:Vuex状态管理目录,存放actions、mutations、getters和整个store入口文件。nuxt.config.js:Nuxt.js配置文件,用于定制项目的设置。...客户端渲染:客户端库接管渲染,Vue.js实例被创建,数据从内联JSON注入到Vue实例。页面完成初始渲染,用户可以看到完整页面内容。此时,页面是交互式,用户可以触发事件和导航。...(Vue实例)route(当前路由信息)store(Vuex Store,如果已启用)payload(如果有asyncData返回数据)中间件可以顺序执行,每个中间件可以决定是否继续执行链下一个中间件...代码拆分:Nuxt.js自动进行代码拆分,确保只有当路由被访问时才加载相关代码。...8. 404 页面: 设置 generate.fallback 为 true 会为未预渲染动态路由生成一个404页面,当用户访问这些路由时,Nuxt.js 会尝试在客户端渲染它们。

7300

我为什么不再用 Vue,而改用 React?

Redux 需要 action、reducer 和 store,而 Vuex 只有 action、mutation 和 store。...# NuxtJS 老实说,受 React NextJS 启发 NuxtJS 是我在 Vue 项目中默认框架。我喜欢 Nuxt 项目的约定优于配置架构。 页面位于 page 目录下。...存储在 store 目录。中间件则在 middleware 目录里,依此类推。 所有注入都是透明。所有配置都在 nuxt.config.js 里。太棒了!...所以我很容易就能理解 React 组件工作机制,并知道该如何将其集成到应用程序。 你也可以在 Vue 中使用 ES6 语法,但是 React 比 Vue 设计得更好。...有时,我会为很多 Nuxt 问题而挣扎许久,搜索解决方案过程还会发现很多 Next(React)主题。 看看 Github 仓库,数字可以说明一切。 ? ? 或它们各自框架: ? ?

3.5K20

Next.jsNuxt.jsNest.jsFastify

Nuxt.js:官方未提供支持,但是有其他实现途径,使用框架 serverMiddleware 能力。...动态路由:两者都支持动态路由访问,但是命名规则不同:Next.js:使用括号命名,/pages/article/[id].js -> /pages/article/123。...:称为 Layout,可以在 layouts 文件夹下创建组件, layouts/blog.vue,并在路由组件中指明 layout,也就是说,Nuxt.js 可以有多套容器,其中 ...link 资源可以写在应用配置:在页面路由组件配置:使用 head 函数方式返回 head 配置,函数可以使用 this 获取实例:     {{ title }}</...Ada 方式有所不同,路由文件夹下并没有直接导出组件,而是需要根据运行环境导出不同处理函数和模块,服务器端对应 index.server.js 文件需要导出 HTTP 请求方式同名 GET、

3.1K10

点亮你Vue技术栈,万字Nuxt.js实践笔记来了

因为服务端渲染特殊性,很多Nuxt提供生命周期都是运行在服务端,也就是说它们会先于 Vue 实例创建。因此在这些生命周期中,我们无法通过 this 去获取实例方法和属性。...使用 app 可以来弥补这点,一般我们会把全局方法同时注入到 this 和 app ,在服务端生命周期中使用 app 去访问该方法,而在客户端中使用 this,保证方法共用。...是 Vuex.Store 实例,在运行时 Nuxt.js 会尝试找到是应用根目录下 store 目录,如果该目录存在,它会将模块文件加到构建配置。...首先在 .nuxt/store.js ,对 store 模块文件做出一系列处理,并暴露 createStore 方法。...与上面有点不同是,我们能够访问实例方法 this.methods.xxx。

23.5K31

Vue 折腾记 - (12) Nuxt.js写一个校验访问浏览器设备类型及环境中间件

理清了逻辑我们就可以开始写了 ---- 谈谈Nuxt生命周期 Nuxt.js就是一个Vue服务端渲染框架,和React服务端渲染框架Next.js类似, 我们这里使用版本是v1.4.2(默认初始化版本是基于...Express), 让我们看官方给出Nuxt执行生命周期流程 ?...render(渲染)之前有几个阶段,通用全局配置均在middleware(中间件)阶段 那为什么不在nuxtServerInit去做一些处理,因为这里只能触发storeaction ---- 代码实现...* @returns type: 设备类型 * env: 访问环境(微信/微博/qq) * masklayer: 就是给外部拿到判断是否显示遮罩层,一些特殊环境要引导用户到外部去打开访问...= deviceType(context.userAgent); // 这里注入到store,是因为我部分页面需要判断机型请求不同数据, // 你们没有用到的话可以移除 context.store.commit

2K40

VueKey属性,v-for和v-if,v-ifv-show,v-pre不渲染,v-once只渲染一次

/child-component> v-for用于元素或组件时候,引用信息将包含dom节点或组件实例数组 is 用于动态组件且基于dom内模板限制来工作 <component v-bind:is...方法 action:触发mutaion方法 module:Vue.set动态添加state到响应式数据 ?...初始化路由实例new VueRouter() 挂载到vue实例上 提供一个路由占位,用来挂载Url匹配到组件 ?...file 选择何种模式路由以及底层原理 hash模式:丑,无法使用锚点定位 ? file Nuxt解决了哪些问题? ? file ? file Nuxt核心原理,SSR核心原理 ?...file 扩展简化版min-vuex,实现getters,并实现Vuex方式注入$store 计算属性computed实现getters缓存 beforeCreate混入$store获取方式 ?

2.7K20

主题色切换+国际化 三连

fontWeight: FontWeight.bold), ... ---- 所以只要有需要颜色地方,都可以使用这种方法从状态拿主题色,颜色切换事件触发也是非常简单。...思路是极为一致,让我们看看有哪些不同,首先要说是rudux三大件:状态State,行为Action和处理器Reducer。所有状态由仓库统一管理,天子状态AppState向下分封。 ?...) => LocaleState(action.locale,)); ---- 2-redux属性使用 redux需要用StoreProvider进行包裹,其中在store属性下进行仓库配置...StoreBuilder就像ProviderConsumer一样存在,只不过泛型都是统一天子AppState。...---- 1.主题色BloC 状态类 可以根据自己爱好写出自己风格。下面是我比较喜欢风格。将状态量放在抽象类,其他状态去继承他来实现状态分化。只要你想,也可以加一些常用状态。

3.3K20

Nuxt.js,Next.js,Nest.js傻傻分不清?

服务端渲染实现方式通常涉及使用服务器端框架(Node.js、Java、Python等)来处理请求,并在服务器上生成完整 HTML 页面。...另外,Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码自动化构建工作(打包、代码分层、压缩等等)。...package.json ├── pages ├── plugins ├── static ├── store ├── test ├── tree.txt └── yarn.lock nuxt配置文件在...启动开发服务器:运行开发命令,启动 Next.js 开发服务器,并访问 http://localhost:3000 查看您应用程序。...这只是一个简单示例,您可以根据需要扩展和定制接口功能。Nest.js 还提供了更多装饰器和功能,请求体验证、异常处理、数据库集成等,以满足不同场景下需求。

2.3K30
领券