我希望我的 html 填充 json 数据（json 文件），这些数据将以对象形式存储在 VUEX 存储中。
错误：无法读取未定义的属性“中间件”
过滤器工作：
1.index.js 文件包含存储实例，如您所知，它将在整个应用程序中共享。2.glyph.js 文件包含所有将由transformer.js 填充的空对象
3.loader.js 文件包含用于调用 tansformer.js 突变的钩子 4.transformer.js 很简单，它在存储中作为突变导出并且仅由加载器.js
.json 文件：
path: {
'1': '<svg>......</svg'
},
heroiconClass: {
'1': 'heroicon-phone'
}
默认.vue：
<x-svg :path="glyph.path['1']" :class="glyph.heroiconClass['2']"/>
代码：
索引.JS
/*
EXTERNAL MODULE'S.
*/
// temp module's.
import __debug from 'debug' // stand alone debugger for this module.
// core module's.
import Vuex from 'vuex' // core: vuex store for data and state management.
// npm module's.
import _ from 'underscore' // npm: utility module.
/*
TRANSFORMER DATA
*/
import __glyphDataJsonModule from '~/store/json/glyph' // custom: heroicon and moon icon glyph collection.
/*
STORE OPTION'S
*/
import { loader } from './json/dataFiller/loader'
import * as getters from './json/dataFiller/getters'
import { Transformer } from './json/dataFiller/transformer'
/*
VUEX INSTANCE
*/
export const Store = new Vuex.Store({
modules: {
__glyphDataJsonModule
},
mutations: {
Transformer
},
actions: {
loader
},
getters
})
字形.JS
/*
EXTERNAL MODULE'S.
*/
// temp module's.
import __debug from 'debug' // stand alone debugger for this module.
// npm module's.
import _ from 'underscore' // npm: utility module.
/*
EXPORT'S.
*/
export default {
namespaced: true,
state: function () {
return {
heroiconPath: {},
heroiconClass: {},
path: {},
brand: {},
default: {}
}
}
}
GETTER.JS
export const glyph = function (state) {
return this.state.glyph
}
加载器.JS
/*
EXPORT'S.
*/
export const loader = function () {
return {
load (context) {
context.commit('TRANSFORMER')
}
}
}