Question

我写了一个计算从商店中获取值，这里是代码

computed: {
      language: function () {
        return this.$store.state.user.language
      }

当我在另一个计算中使用此方法从数组中的json文件中加载数据时

levels: function () {
         return require('@/assets/languages/' + this.language + '/DataFiles/levels.json')
      }

我得到一个错误[Vue警告]：渲染错误：“错误：找不到模块“ @ / assets / languages”“

尽管如果我编写第二个不带参数的计算方法，它会像这样

levels: function () {
         return require('@/assets/languages/' + 'Spanish' + '/DataFiles/levels.json')
      }

我该如何解决这个问题？

Answer 1

说明：

require语句不是动态的。 Webpack正在构建时对其进行解析，但是那时您的商店不存在，这就是为什么您会收到该错误的原因。

解决方案：

您似乎别无选择，只能手动导入所有可能的json文件：

我想在此方面为您提供帮助。

添加另一个文件：

//levels.js

import spanish from '@/assets/languages/Spanish/DataFiles/levels.json'
import english from '@/assets/languages/English/DataFiles/levels.json'
import hebrew from '@/assets/languages/Hebrew/DataFiles/levels.json'
//import all other languages

export default {spanish,english,hebrew,/*all ather languages*/}

然后，在您的组件文件（计算出的属性所在的位置）中导入我们新创建的文件：

import levelsObject from '../path/to/levels.js'

并将其添加为data属性（出于测试原因，这是最佳做法）。您的vue对象看起来像：

export default {
    data(){
       return {
          levelsObject
       }
    },
    computed:{
        language: function () {
        return this.$store.state.user.language
      },
        levels: function () {
          //now you can simply return the wanted object:
         return this.levelsObject[this.language];
      }
    } 
}

我该如何使用计算的财产从另一家商店中获取价值？

1 个答案: