Vue.js 如何在Vuetify中自定义主题颜色？

graphQL

和

apollo

正常

typescript

AllColors.ts

是：

import gql from 'graphql-tag'
export const ALL_COLORS = gql`
    query allColors {
        allColors {
            primary
            secondary
        }
    }
`

我在plugin/vuetify.ts中尝试过这个，但没有成功

import   Vue          from 'vue';
import   Vuetify      from 'vuetify/lib/framework';
import   colors       from 'vuetify/lib/util/colors';
import { ALL_COLORS } from '@/graphql/AllColors'

Vue.use(Vuetify);

export default new Vuetify({
  data() {
    return {
      allColors: []
    }
  },
  theme: {
    themes: {
      dark: {
        primary:    this.allColors.primary,
        secondary:  this.allColors.secondary
      },
    },
  },
  apollo: {
    allColors: {
      query: ALL_COLORS
    }
  }
});

给出此错误：

 DONE  Compiled successfully in 240ms                                                                              12:54:25

Type checking in progress...

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.102:8080/

ERROR in /home/user1/sites/app1/src/plugins/vuetify.ts(24,19):
26:19 Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
    24 |         primary: this.allColors.primary,
       |                       ^
    25 |         secondary: this.allColors.secondary
    26 |       },
    27 |     },
    28 |   },

ERROR in /home/user1/sites/app1/src/plugins/vuetify.ts(25,21):
26:19 Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
    24 |         primary: this.allColors.primary,
    25 |         secondary: this.allColors.secondary
       |                         ^
    26 |       },
    27 |     },
    28 |   },
Version: typescript 3.9.7
Time: 313ms

---

有什么想法吗？

Vuetify不喜欢您调用AllColor的方式，因为它无法识别变量： 我假设在API调用中定义了主颜色和次颜色。然后仍然需要指定它们的路径。vuetify中的颜色是如何存储的？因为变量路径看起来不完整，所以可能更像这样：

this.apollo.AllColors.query.response.data.primary

（您可能不需要说response.data）

---

可以帮助您存储颜色变量。

看起来您将

Vue

构造函数和

Vuetify

构造函数混为一谈。只有前者具有用于创建本地反应属性的

data（）

，而

apollo

属性用于

vue apollo

要更正此问题，请执行以下操作：

在

@/plugins/vuetify.ts

中，从

vuetify

构造函数选项中删除

data（）

和

apollo

，并将

apollo

移动到

main.ts

中的

Vue

构造函数

在使用主题设置创建

Vuetify

实例之前，将

allColors

移动到顶层

/@/plugins/vuetify.ts
从“Vue”导入Vue；
从“Vuetify/lib”导入Vuetify；
导入“vuetify/dist/vuetify.min.css”；
Vue.use（Vuetify）；
常量所有颜色={
主要：“#1976D2”，
次要：'#4242'，
}
导出默认的新Vuetify({
主题：{
主题：{
黑暗：{
primary:allColors.primary，
secondary:allColors.secondary
},
},
},
});

//main.ts
从“Vue”导入Vue；
从“@/plugins/vuetify”导入vuetify；
从“@/graphql/AllColors”导入{ALL_COLORS}
新Vue({
vuetify，
阿波罗：{
所有颜色：{
查询：所有颜色
}
}
});

如果您使用的是灯光主题，请记住也要更改它们