无法读取Vue中未定义的属性“匹配”

如何解决无法读取Vue中未定义的属性“匹配”

我发现一旦激活此行：

const stateRecord：App = loadSettings（）

在/src/store/modules/app.ts

我收到此错误：“无法读取未定义的属性'match'”

这是/src/store/modules/app.ts：

import Vue from 'vue'
import { loadSettings,setSettings } from '@/services/electron-services/setting/setting'

const TOGGLE_THEME = 'TOGGLE_THEME'
const TOGGLE_LANG = 'TOGGLE_LANG'

const stateRecord: App = loadSettings()

const app = {
  state: {
    currentTheme: stateRecord.currentTheme || 'light',},mutations: {
    [TOGGLE_THEME](state: App,currentTheme: Theme) {
      state.currentTheme = currentTheme
    },actions: {
    TOGGLE_THEME({ commit }: any,payload: App) {
      setSettings('settings.currentTheme',payload.currentTheme)
      commit(TOGGLE_THEME,payload.currentTheme)
    },}

export default app

这是src / services / electron-services / setting / setting：

import db from '../database/index'

export const loadSettings = (): App => {
  return db.get<App>('settings')
}

export const setSettings = (key: string,value: string | boolean | number): string | boolean 
| number => {
  return db.set<string | boolean | number>(key,value)
}

export default {}

这是电子服务/数据库/index.ts：

import Lowdb from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import LodashID from 'lodash-id'
import { app,remote } from 'electron'

interface Schema {
  windowSize: {
    height: number
    width: number
  }
  settings: {
    currentLang: string
    currentTheme: string
  }
}

const isRenderer: boolean = process.type === 'renderer'
// Render process use remote app
const APP: Electron.App = isRenderer ? remote.app : app

const STORE_PATH: string = APP.getPath('userData')

// In production mode,during the first open application
// APP.getPath('userData') gets the path nested and the datastore.js is loaded.
// if it doesn't exist,create it.
if (!isRenderer) {
  if (!fs.pathExistsSync(STORE_PATH)) {
    fs.mkdirpSync(STORE_PATH)
  }
}

class DB {
  private db: Lowdb.LowdbSync<Schema>
  public constructor() {
    const adapter: Lowdb.AdapterSync<Schema> = new FileSync<Schema>(path.join(STORE_PATH,'/db.json'))
    this.db = Lowdb(adapter)
    // Use lodash-id must use insert methods
    this.db._.mixin(LodashID)
    if (!this.db.has('windowSize').value()) {
      this.db
        .set('windowSize',{
          width: 1025,height: 749,})
        .write()
    }
    if (!this.db.has('settings').value()) {
      this.db
        .set('settings',{
          currentLang: 'en',currentTheme: 'light',})
        .write()
    }
    // Purple to Night
    if (this.db.get('settings.currentTheme').value() === 'purple') {
      this.db.set('settings.currentTheme','night').write()
    }
    if (!this.db.has('settings.currentLang')) {
      this.db.set('settings.currentLang','en').write()
    }
  }
  // read() is to keep the data of the main process and the rendering process up to date.
  public read() {
    return this.db.read()
  }
  public get<T>(key: string): T {
    return this.read().get(key).value()
    //return this.db.get(key).value()
  }
  public find<T>(key: string,id: string): T {
    const data: $TSFixed = this.read().get(key)
    return data.find({ id }).value()
  }
  public set<T>(key: string,value: T): T {
    //return this.read().set(key,value).write()
    return this.db.set(key,value).write()
  }
  public insert<T>(key: string,value: T): T {
    const data: $TSFixed = this.read().get(key)
    return data.insert(value).write()
  }
  public update<T>(key: string,id: string,value: T): T {
    const data: $TSFixed = this.read().get(key)
    return data.find({ id }).assign(value).write()
  }
  public remove<T>(key: string,id: string): T {
    const data: $TSFixed = this.read().get(key)
    return data.removeById(id).write()
  }
  public filter<T,K>(key: string,query: K): T {
    const data: $TSFixed = this.read().get(key)
    return data.filter(query).value()
  }
  public has(key: string): boolean {
    return this.read().has(key).value()
  }
}

环境信息：

  System:
    OS: Linux 5.4 Ubuntu 18.04.5 LTS (Bionic Beaver)
    cpu: (8) x64 Intel(R) Core(TM) i7-4790K cpu @ 4.00GHz
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
  browsers:
    Chrome: 85.0.4183.83
    Firefox: 80.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.4.6 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.4.6 
    @vue/cli-plugin-babel: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-e2e-cypress: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-router: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-typescript: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-unit-mocha: ~4.4.0 => 4.4.6 
    @vue/cli-plugin-vuex: ~4.4.0 => 4.4.6 
    @vue/cli-service: ~4.4.0 => 4.4.6 
    @vue/cli-shared-utils:  4.4.6 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/test-utils: ^1.0.3 => 1.0.3 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    typescript: ^3.9.7 => 3.9.7 
    vue: ^2.6.11 => 2.6.11 
    vue-class-component: ^7.2.5 => 7.2.5 
    vue-cli-plugin-electron-builder: ~2.0.0-rc.4 => 2.0.0-rc.4 
    vue-hot-reload-api:  2.3.4 
    vue-i18n: ^8.20.0 => 8.20.0 
    vue-loader:  15.9.3 
    vue-property-decorator: ^9.0.0 => 9.0.0 
    vue-router: ^3.2.0 => 3.3.4 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuetify: ^2.3.10 => 2.3.10 
    vuex: ^3.5.1 => 3.5.1 
    vuex-class: ^0.3.2 => 0.3.2 
  npmGlobalPackages:
     @vue/cli: 4.4.6

  electron version: 10.0.0

这是vue.config.js：

const WorkerPlugin = require('worker-plugin')

module.exports = {
  // options...
  publicPath: '',pluginoptions: {
    electronBuilder: {
      // Prevent bundling of certain imported packages and instead retrieve these external 
dependencies at runtime.
      // In order to connect to websocket.
      // https://github.com/nklayman/vue-cli-plugin-electron-builder/issues
/652#issuecomment-583764345
      externals: ['ggc','tesseract.js'],builderOptions: {
        productName: 'GGC',win: {
          icon: './public/app.ico'
        },mac: {
          icon: './public/icons/Icon.icns',target: [
            'pkg','dmg','zip',],linux: {
          icon: './public/app.png'
        }
      },// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide
/configuration.html#webpack-configuration
      chainWebpackRendererProcess: (config) => {
        // Chain webpack config for electron renderer process only
        // The following example will set IS_ELECTRON to true in your app
        config.plugin('define').tap((args) => {
          args[0]['IS_ELECTRON'] = true
          return args
        })
      },mainProcessFile: 'src/background.ts',// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide
/configuration.html#typescript-options
      disableMainProcesstypescript: false,// Manually disable typescript plugin for main 
process. Enable if you want to use regular js for the main process (src/background.js by 
default)
      mainProcesstypeChecking: false,// Manually enable type checking during webpck 
bundling for background file.
      // https://nklayman.github.io/vue-cli-plugin-electron-builder/guide
/guide.html#preload-files
      preload: 'src/preload.js',// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide
/security.html#node-integration
      nodeIntegration: false
    },// https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#web-
workers
    configureWebpack: {
      plugins: [new WorkerPlugin()]
    }
  }
}

这是webpack.config.js：

module.exports = {
  entry: './src/background.ts',target: 'node',output: {
    path: path.join(__dirname,'build'),filename: 'background.js'
  },// https://github.com/GoogleChromeLabs/worker-plugin
  plugins: [
    new WorkerPlugin()
  ],// https://webpack.js.org/plugins/define-plugin/
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }),//https://vuetifyjs.com/en/getting-started/quick-start/#webpack-install
  rules: [
    {
      test: /\.s(c|a)ss$/,use: [
        'vue-style-loader','css-loader',{
          loader: 'sass-loader',// Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),fiber: require('fibers'),indentedSyntax: true // optional
          },// Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),sassOptions: {
              fiber: require('fibers'),indentedSyntax: true // optional
            },}

“无法读取未定义的属性'match'”的原因可能是什么？类DB中的此函数有什么问题？：

public get<T>(key: string): T {
  return this.read().get(key).value()
  //return this.db.get(key).value()
}

期待您的帮助