vue 使用xuex来改变后台接口中英文的字段

vuex里存储全局数据

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({state: {all: {lang: sessionStorage.getItem("lang")? sessionStorage.getItem("lang"): "zh" // 全局判断当前语言状态}},mutations: {changeLang(state, langs) {state.all.lang = langs;sessionStorage.setItem("lang", langs);}},getters: {lang(state) {return state.all.lang;}}
});

封装一个转换字段的方法，

function handleLang(obj, key, is) {// 如果符合要求代表是英文 就拼接对应的数据en开头，第三个字符转换成大写，在配接上切割后的字符。 英文拼接之后是这种形式 enField。具体字段还是要和后端商量。//不符合要求代表是中文 就直接是普通的字段 fieldreturn this.$store.state.all.lang == 'en' && !is ? obj['en' + key.substring(0, 1).toUpperCase() + key.substring(1)] : obj[key]}
export default handleLang;

mian.js将方法挂在到vue实例。

import handleLang from "@/handleLang/handleLang.js";
Vue.prototype.$handleLang = handleLang;

最后获取到的数据用双花括号插入到对应模板里面

//true代表is只能是true 永远走不了中文条件
//不写就代表永远是false 只用根据lang来判断是中文还是英文
{{$handleLang(数据, '字段',true)}}

vue 使用xuex来改变后台接口中英文的字段相关推荐

Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口
场景浏览器web端实现语音消息录制并在录制结束之后将其上传到后台接口. 若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CS ...
vue连接后端本地接口_详解vue配置后台接口方式
详解vue配置后台接口方式在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 ...
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，其实就是路由在后台配置前端请求接口后生成路由表
最近刚结束一个项目,然后再客户的百般刁难下又增加了项目新需求: 后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由) vue项目实现动态路由的方式大体可分为两种: 1.第一种就是 ...
vue项目 - Mockjs 模拟后台接口数据
Mock 可以进行生成随机数据,模拟后端接口数据,从而实现开发时,前后端分离,提高效率. 1.安装 npm i mockjs -S or yarn add mockjs 2.引入在src文件目录下, ...
Vue调用后台接口渲染列表
下载Axios npm install axios -s 在min.js中引入 import axios from 'axios' Vue.prototype.$axios= axios 拿到接口先封 ...
Vue 2.x 实战之后台管理系统开发（二）
1. 导语承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了.在开发过程中 ...
Vue实战狗尾草博客后台管理系统
Vue实战狗尾草博客后台管理系统第一章这里准备采用的技术栈为:vue全家桶+element-ui 这里因为是后台管理系统,没有做SSR的必要.所以这里就采用前后端分离来昨晚这个项目~ 项目搭建 vu ...
Vue + webpack 项目配置化、接口请求统一管理
准备工作需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题. 又或者后面其他同事接手你的模块,或者改你的bug ...

vue 使用xuex来改变后台接口中英文的字段

vue 使用xuex来改变后台接口中英文的字段相关推荐

最新文章

热门文章